「render」メソッドで配列をマッピングするときに「無効な React Child」エラーが発生するのはなぜですか?

React エラー: 無効な React 子

このエラーは、render メソッドが無効な React 子をレンダリングしようとしたときに発生します。このエラーは、返されるときに発生する可能性があります。有効な React 要素の代わりに配列またはオブジェクト。

あなたの場合、マップ関数内でバインドされたメソッド this.onItemClick.bind(this, item) を直接参照することによってエラーが発生します。これを修正するには、代わりにアロー関数を使用する必要があります。

<code class="javascript">render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={(e) => this.onItemClick(e, item)} key={item}>{item}</li>);
    });

    // ...
}</code>

アロー関数は、this 値がコンポーネント インスタンスにバインドされる新しいスコープを作成し、onItemClick 関数にアクセスできるようにします。

エラー メッセージについて

エラー メッセージには次の情報が含まれています:

• オブジェクトは React の子として有効ではありません: 無効な子がオブジェクトであることを示します。
• dispatchConfig、dispatchMarker、nativeEvent、...: イベント オブジェクトのプロパティをリストします。イベント オブジェクトのプロパティは、最初の引数として渡されます。 onClick ハンドラー。
• Welcome のレンダリング メソッドを確認します。 エラーが発生したコンポーネントを指します (コンポーネントの名前が「Welcome」であると仮定します)。

補足説明

• アロー関数のバインド: アロー関数には独自の this バインディングがないため、定義されているスコープに自動的にバインドされます。
• 状態の更新: コールバック関数で setState メソッドを使用することで、アロー関数内でコンポーネントの状態を更新できます:

<code class="javascript">onClick={(e) => this.setState((prevState) => ({ lang: item }))}</code>

以上が「render」メソッドで配列をマッピングするときに「無効な React Child」エラーが発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。