[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
2022-02-12 12:24:01
質問
のような配列を介してマッピングする際に、大規模なエラーが発生します。
// 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;
というエラーが発生します。
この呼び出しに一致するオーバーロードはありません。 2つのうちのオーバーロード1、'(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
解決方法は?
をクリックすると、エラーメッセージが表示されます。
Property 'handleTextAreaUpdate' does not exist on type
のプロパティを定義する必要があることを意味します。
handleTextAreaUpdate
の中で
TestRowProps
インターフェイスを使用します。
関連
-
[解決済み】無効な設定オブジェクトです。APIスキーマと一致しない設定オブジェクトを使用してWebpackが初期化されました。
-
[解決済み] Apolloクライアントでログアウトした後、ストアをリセットする
-
[解決済み] material-ui-pickers KeyboardDatePicker をモーメントで使用するには?
-
[解決済み] jest: テストスイートの実行に失敗しました。予期しないトークンのインポート
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] React-Router 4 キャッチオールルート
-
[解決済み] 'Proptypes'が定義されていない
-
[解決済み] axios-mock-adapter onGet mock data not effective.
-
[解決済み] react.jsで複数のモジュールをエクスポートする
-
[解決済み] アクシオスは定義されていません
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React - 式は1つの親要素を持つ必要がありますか?
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み】ngrokがReact devサーバーに接続しようとすると、無効なホストヘッダが表示される。
-
[解決済み] react-router-domを使用する際に「Function components cannot be given refs」を回避するにはどうすればよいですか?
-
[解決済み] material-ui-pickers KeyboardDatePicker をモーメントで使用するには?
-
[解決済み] react jsでウィンドウを開くイベントを処理するにはどうすればよいですか?
-
[解決済み] react.jsでng-ifに相当するものは何ですか?
-
[解決済み] nginxでcertbotを使用する際の問題点
-
[解決済み] React QueryとReduxの主な違いは何ですか?
-
[解決済み] Reactでグローバル変数を宣言する方法とは?