React JSX：條件數組中的唯一鍵提示

Question

在一個沒有子項的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>

我理解為什么在渲染子組件時需要關鍵道具 ，但是當“數組中的子”是像這樣的任意子元素集時，如何滿足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>
          );
        })}