「インバリアント違反: 無効な反応子としてのオブジェクト」が発生するのはなぜですか?

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

React でオブジェクトを次のようにレンダリングしようとすると、React の不変違反エラーが発生することがあります。 React の直接の子。指定されたコンポーネントでは、onClick ハンドラーにオブジェクト (イベント オブジェクト) がパラメーターとして渡されるときにエラーが発生します。

React は、子がプリミティブ値 (文字列、数値など)、または React のいずれかであることを期待します。要素、またはこれらの値の配列。オブジェクト、オブジェクトの配列、またはその他の複雑な構造は、有効な子として認識されません。

エラーを解決するには、イベント ハンドラー this.onItemClick.bind(this, item) をアロー関数でラップする必要があります。イベント オブジェクトがパラメータとして渡されないようにします。正しい実装は次のようになります。

{items.map((item) => (
  <li key={item} onClick={(e) => this.onItemClick(e, item)}>{item}</li>
))}

このエラーのもう 1 つの理由は、オブジェクトが意図せず文字列としてレンダリングされた場合である可能性があります。例:

breadcrumbElement = { ...someObject ... };

{breadcrumbElement} // Renders as an object, not a string

すべての子要素が文字列、要素、またはこれらの値の配列であることを確認してください。オブジェクトを表現する必要がある場合は、このエラーを回避するために、オブジェクトを文字列に変換するか、React.Fragment でラップしてください。

以上が「インバリアント違反: 無効な反応子としてのオブジェクト」が発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。