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

Patricia Arquette
リリース: 2024-11-06 15:31:03
オリジナル
499 人が閲覧しました

Why am I getting the

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!