Reactjs React JSX:条件数组中的唯一键属性

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

{item.sale？
[Sale，{item.Sale}，SRP，{item.SRP}]：
[价格，{item.srp}]
}

---

我理解呈现子组件时的情况，但当“数组中的子元素”是这样的任意子元素集时，我如何满足React/JSX要求？

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

var-dl；
如果（项目销售）{
dl=
特价
{item.sale}
SRP
{item.srp}
;
}否则{
dl=
价格
{item.srp}
;
}

在根目录上提供键告诉React，当

item.sale

更改时，它应该如何协调列表

---

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

我也有类似的问题，我在下面的代码中添加

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>
          );
        })}

this.state.shopList.map（（商店，索引）=>{
返回(
{shop.shopName}
{shop.email}
{shop.shopAddress}
{shop.approved}
{shop.iban}
);
})}