網站搜尋

reactjs - React + TypeScript 錯誤:沒有匹配此調用的重載


當我像這樣對陣列進行映射時,我收到了一個巨大的錯誤:

// Home.tsx

  render() {
    const { inputs, outputs, expectedOutputs } = this.state;
    return (
        <ContentContainer>
          {inputs.map((input, i) => {
            return (
              <TestRow
                key={i}
                rowNumber={i}
                xml={inputs[i].xml}
                desc={inputs[i].desc}
                output={outputs[i]}
                expectedOutput={expectedOutputs[i]}
                handleTextAreaUpdate={this.handleTextAreaUpdate}
              />
            );
          })}
        </ContentContainer>
    );
// TestRow.tsx

interface TestRowProps {
  xml: string;
  desc: string;
  output: string;
  expectedOutput: string;
  rowNumber: number;
}

class TestRow extends Component<TestRowProps, {}> {
  textArea: any;

錯誤是:

沒有任何重載符合此調用。重載 1(共 2 個),'(props: Readonly): TestRow',給出了以下錯誤。

    Type '{ key: number; rowNumber: number; xml: string; desc: string; output: never; expectedOutput: string; handleTextAreaUpdate: (e: { target: { value: string; }; }, column: number, rowNumber: number) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TestRow> & Readonly<TestRowProps> & Readonly<{ children?: ReactNode; }>'.
      Property 'handleTextAreaUpdate' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<TestRow> & Readonly<TestRowProps> & Readonly<{ children?: ReactNode; }>'.
  Overload 2 of 2, '(props: TestRowProps, context?: any): TestRow', gave the following error.
    Type '{ key: number; rowNumber: number; xml: string; desc: string; output: never; expectedOutput: string; handleTextAreaUpdate: (e: { target: { value: string; }; }, column: number, rowNumber: number) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TestRow> & Readonly<TestRowProps> & Readonly<{ children?: ReactNode; }>'.
      Property 'handleTextAreaUpdate' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<TestRow> & Readonly<DiagramProps> & Readonly<{ children?: ReactNode; }>'

. TS2769

答案#1

在錯誤訊息中,你可以找到問題。Property 'handleTextAreaUpdate' does not exist on type 意味著你應該在 TestRowProps 介面中定義一個 handleTextAreaUpdate 屬性。