在 li 中反应键

Question

我有一个警告：数组或迭代器中的每个孩子都应该有一个唯一的“键”道具。但是我用了钥匙。这是我的代码：

return (
  <li onClick={this.handleOnMarkAsCompleted} key={Date.now()}>
    { completed ? <b>{value}</b> : value }
  </li>
)

有任何想法吗？为什么会发生？

Answer 1

考虑这两个例子：

const Item = ({ i }) => <li key={i}>li</li>;
const List = ({ data }) => <ul>{data.map((_, i) => <Item i={i} />)}</ul>;

在这种情况下，你会得到：

Warning: Each child in an array or iterator should have a unique "key" prop.

因为li不是数组项。它的内部Item是一个数组项。

所以关键就Item可以解决这个问题：

const Item = ({ i }) => <li key={i}>li</li>;
const List = ({ data }) => <ul>{data.map((_, i) => <Item key={i} />)}</ul>;

代码沙箱：https : //codesandbox.io/s/oojwjq0lj6

来自文档：

键只在周围数组的上下文中有意义。

例如，如果您提取一个ListItem组件，则应将键保留<ListItem />在数组中的元素上，而不是放在<li> 其ListItem本身的元素上。

关于使用的说明Date.now()：

密钥应该是稳定的、可预测的和唯一的。不稳定的键（如 Math.random() 产生的键）将导致不必要地重新创建许多组件实例和 DOM 节点，这可能导致子组件的性能下降和状态丢失。