React アプリで「インバリアント違反: オブジェクトは React の子として有効ではありません」というメッセージが表示されるのはなぜですか?

React エラー: 子としてのオブジェクト

React アプリケーションでは、次の場合に「不変違反: オブジェクトは React の子として有効ではありません」エラーが発生します。オブジェクトをコンポーネントの子としてレンダリングしようとしています。この問題は、子が文字列、数値、または要素を予期していたが、代わりにオブジェクトを受け取った場合に発生します。

指定された例では、render メソッドのマップ関数内で this.onItemClick.bind(this, item ) は、イベント オブジェクト全体をプロパティとして onClick ハンドラーに誤って渡します。その結果、onClick イベント ハンドラーはそのプロパティを持つイベントをオブジェクトとして受信し、エラーがトリガーされます。

これを解決するには、マップ内でアロー関数を使用してクリック イベントを処理し、必要な引数を渡すことができます。 :

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

また、イベント オブジェクトを保持したい場合は、必要なパラメータのみをバインドできます:

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }

以上がReact アプリで「インバリアント違反: オブジェクトは React の子として有効ではありません」というメッセージが表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。