☰

不変違反: オブジェクトは React の子として有効ではありません 質問する

tag-icon • tag-icon javascript reactjs
不変違反: オブジェクトは React の子として有効ではありません 質問する

私のコンポーネントのレンダリング関数には次のものがあります:

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>
    );
  }

すべて正常にレンダリングされますが、<li>要素をクリックすると次のエラーが表示されます。

キャッチされないエラー: 不変違反: オブジェクトは React の子として有効ではありません (見つかったオブジェクト: キー {dispatchConfig、dispatchMarker、nativeEvent、target、currentTarget、type、eventPhase、bubbles、cancelable、timeStamp、defaultPrevented、isTrusted、view、detail、screenX、screenY、clientX、clientY、ctrlKey、shiftKey、altKey、metaKey、getModifierState、button、buttons、relatedTarget、pageX、pageY、isDefaultPrevented、isPropagationStopped、_dispatchListeners、_dispatchIDs} を持つオブジェクト)。子のコレクションをレンダリングする場合は、代わりに配列を使用するか、React アドオンの createFragment(object) を使用してオブジェクトをラップします。のレンダリング メソッドを確認してくださいWelcome。

map 関数内で に変更すると、すべてが期待どおりに動作しthis.onItemClick.bind(this, item)ます。(e) => onItemClick(e, item)

誰かが私が何を間違っているのか、なぜこのエラーが発生するのかを説明してくれると嬉しいです

更新 1:
onItemClick 関数は次のようになり、this.setState を削除するとエラーが消えます。

onItemClick(e, item) {
    this.setState({
      lang: item,
    });
}

しかし、このコンポーネントの状態を更新する必要があるため、この行を削除することはできません。

ベストアンサー1

このエラーが発生しましたが、文字列値であると想定していたオブジェクトを JSX コードに意図せず含めていたことが判明しました。

return (
    <BreadcrumbItem href={routeString}>
        {breadcrumbElement}
    </BreadcrumbItem>
)

breadcrumbElement以前は文字列でしたが、リファクタリングによりオブジェクトになりました。残念ながら、React のエラー メッセージでは、問題のある行をうまく特定できませんでした。スタック トレースを遡って、コンポーネントに渡される「props」を認識し、問題のあるコードを見つける必要がありました。

文字列値であるオブジェクトのプロパティを参照するか、オブジェクトを適切な文字列表現に変換する必要があります。 1 つのオプションは、JSON.stringify実際にオブジェクトのコンテンツを表示する場合です。

おすすめ記事