5

在无子 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>

我理解为什么在渲染子组件时需要 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 回答