入れ子になった React 配列の一意のキー エラーを解決するには?

React.js の配列の子の一意のキーを理解する

問題:

A Reactネストされた配列を使用してソート可能なテーブルを作成するコンポーネントで、一意の配列がないことを示すエラーが発生しました。配列の子のキー。

分析:

この問題を解決するには、配列内の各直接の子と、それらの子に含まれる各要素に、ユニークなキープロップ。これにより、React はレンダリング中に DOM の必要な部分のみを効率的に更新できます。

解決策:

提供されたコードでは、TableRowItem コンポーネントが子要素をレンダリングしようとしています。キーを指定せずに。これを修正するには、次のように TableRowItem 内の各子 td 要素に一意のキーを割り当てます:

{
  render: function() {
    var td = function() {
      return this.props.columns.map(function(c) {
        return <td key={this.props.data[c]}>{this.props.data[c]}</td>;
      }, this);
    }.bind(this);
    return (
      <tr>{td(this.props.item)}</tr>
    );
  }
}

例:

@Chris の応答から適応された次の例を考えてみましょう。これは、ネストされたキーの重要性を示しています。要素:

const ExampleComponent = React.createClass({
  render: function () {
    const infoData = this.props.info;
    return (
      <div>
        {infoData.map((object, i) => {
          return (
            <div className={"row"} key={i}>
              {[
                object.name,
                // Assign unique key to <b> element
                <b className="fosfo" key={i}>
                  { " " }
                  {object.city}{ " " }
                </b>,
                object.age,
              ]}
            </div>
          );
        })}
      </div>
    );
  },
});

補足:

配列構造内の直接の子には常に一意のキーを割り当てることが重要です。これにより、React は必要な DOM 要素のみを最適に更新できるようになり、パフォーマンスとレンダリング効率が向上します。

リファレンス:

• [React Documentation: Keys]( https://reactjs.org/docs/lists-and-keys.html)

以上が入れ子になった React 配列の一意のキー エラーを解決するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。