5

子のない React コンポーネントでは、JSX 条件内で配列を使用しているため、「unique key prop」エラーが発生します。

配列内の各子には、一意の「キー」小道具が必要です。

エラーをトリガーしているコードは次のようになります。

<dl>
  { item.sale ? 
    [<dt>Sale</dt>,<dd className="formatted">{item.sale}</dd>,<dt>SRP</dt>,<dd>{item.srp}</dd>] :
    [<dt>Price</dt>,<dd className="formatted">{item.srp}</dd>]
  }
</dl>

子コンポーネントをレンダリングするときにkey prop が必要な理由は理解していますが、「配列内の子」がこのような子要素の任意のセットである場合、React/JSX を満たすにはどうすればよいですか?

4

2 に答える 2

8

React は配列が静的であることを認識できないため、警告が表示されます。ここで行う最も実用的なことは、次のように書くことです。

var dl;
if (item.sale) {
  dl = <dl key="sold">
    <dt>Sale</dt>
    <dd className="formatted">{item.sale}</dd>
    <dt>SRP</dt>
    <dd>{item.srp}</dd>
  </dl>;
} else {
  dl = <dl key="unsold">
    <dt>Price</dt>
    <dd className="formatted">{item.srp}</dd>
  </dl>;
}

ルートにキーを提供すると、変更時にリストを調整する方法が React に伝えられitem.saleます。

こちらも読みやすいと思います。

于 2014-02-18T19:32:10.363 に答える
1

key={index}同様の問題もあり、次のコードを追加して問題を解決しました。

this.state.shopList.map((shop, index) => {
          return (
            <Table.Row key={index}>
              <Table.Cell collapsing>{shop.shopName}</Table.Cell>
              <Table.Cell collapsing>{shop.email}</Table.Cell>
              <Table.Cell collapsing>{shop.shopAddress}</Table.Cell>
              <Table.Cell collapsing>{shop.approved}</Table.Cell>
              <Table.Cell collapsing>{shop.iban}</Table.Cell>
            </Table.Row>
          );
        })}
于 2018-04-17T13:02:42.633 に答える