「不変違反: オブジェクトは React の子として有効ではありません」エラーが表示されるのはなぜですか? それを修正するにはどうすればよいですか?

不変違反: React の子としてのオブジェクト

React で「オブジェクトは React の子として有効ではありません」というエラーが発生した場合は、レンダリングが不適切であることを示しますオブジェクトを子として扱います。この問題を解決するには、render メソッド内のすべての要素が有効な React ノードであることを確認してください。

提供されたコードでは、this.onItemClick.bind(this, item) が不適切に使用されているためにエラーが発生します。マップ関数内のイベント ハンドラー。通常、bind は関数のコンテキストをバインドするために使用されますが、このシナリオでは意図せずイベント オブジェクトを li 要素の子としてレンダリングします。

問題を修正するには、イベント ハンドラーをマップ関数内のアロー関数:

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

イベント ハンドラーをアロー関数としてカプセル化することで、イベント オブジェクトが誤って子要素として扱われることがなくなり、エラーが解決されました。

更新 1: 状態更新の存在

更新されたコードでは、onItemClick 関数に、コンポーネントの状態を item で更新するための setState 呼び出しが含まれています。この行を削除するとエラーが解決する場合は、状態更新ロジックに問題があることを示唆しています。コンポーネントの状態が正しく操作されていること、更新された状態によって競合やレンダリングの問題が発生していないことを確認してください。

以上が「不変違反: オブジェクトは React の子として有効ではありません」エラーが表示されるのはなぜですか? それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。