React JSX:条件数组中的唯一密钥属性

Question

在一个无子React组件中，由于在JSX条件：中使用了一个数组，我得到了"唯一密钥道具"错误

数组中的每个子级都应该有一个唯一的"键"道具。

触发错误的代码如下所示：

<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>

我理解为什么在渲染子组件时需要关键道具，但当"数组中的子元素"是这样的任意子元素集时，我如何满足React/JSX？

Answer 1

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更改时应如何协调列表。

我倾向于发现这本书也更容易阅读。

Answer 2

我也遇到了类似的问题，我在下面的代码中解决了添加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>
);
})}