数组或迭代器中的每个子代都应具有唯一的“键”道具。不知道为什么

Question

const list = props.things.toDo.map(
  function(thing) {
    return(
      <li>{thing.name}</li>
    );
  }
);

想不出这个来不断得到这个反应警告？

Answer 1

键可帮助React识别哪些项目已更改，添加或删除。应该为数组内的元素赋予键，以赋予元素稳定的身份：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

---

选择键的最佳方法是使用一个字符串，该字符串唯一地标识其同级项中的列表项。通常，您会使用数据中的ID作为键：

const list = props.things.toDo.map(
  function(thing) {
    return(
      <li key={thing.id}>{thing.name}</li>
    );
  }
);

---

如果您对呈现的项目没有稳定的ID，则可以将项目索引用作最后的选择：

const list = props.things.toDo.map(
  function(thing, index) {
    return(
      <li key={index}>{thing.name}</li>
    );
  }
);

如果项目的顺序可能会改变，我们不建议使用索引作为键。这可能会对性能产生负面影响，并可能导致组件状态出现问题。如果您选择不为列表项分配显式键，那么React将默认使用索引作为键。

---

参考：https://reactjs.org/docs/lists-and-keys.html#keys

Answer 2

作为快速解决方案，请尝试以下操作：

<li key={thing.name}>{thing.name}</li>

然后阅读Lists and Keys的React文档。

  

键可帮助React识别哪些项目已更改，添加或删除。应该为数组内的元素赋予键，以赋予元素稳定的身份。

如果不能保证thing.name在所有项目中都相同，则可能要用一个真正唯一的值替换键。

Answer 3

const list = props.things.toDo.map((x, i) => <li key={i}>{thing.name}</li>);

您的代码可以压缩为上述代码。就像其他人提到的那样，每当我们渲染列表时，React都需要每个元素都是唯一的，在这种情况下，它需要一个key道具，但是我相信并没有使用key={thing.name} thing.name不是唯一的机会，我通常会改用100％保证唯一的索引