React中使用map时key为undefined会发生什么？

当在React的map遍历中给元素传入的key为undefined时，React会统一将这些元素的key视为undefined，不会自动为每个元素生成唯一key。

具体影响 #

• 这种情况和完全不传入key的效果一致，React控制台会触发Warning: Each child in a list should have a unique "key" prop.的警告。
• 因为多个元素的key都是undefined，React无法区分它们的身份，在列表更新（比如排序、增删元素）时，可能错误地复用DOM节点，导致组件状态异常、渲染结果不符合预期。

示例代码 #

const data = ['a', 'b', 'c'];
const List = () => (
  <ul>
    {data.map(item => (
      // 显式传入undefined作为key
      <li key={undefined}>{item}</li>
    ))}
  </ul>
);

这段代码运行时会触发上述警告，且列表更新时存在渲染风险。

正确做法 #

• 优先使用数据中自带的唯一标识（比如后端返回的id字段）作为key；
• 如果没有合适的唯一标识，可临时使用数组索引作为key，但仅适用于列表不会重新排序、不会增减元素的场景；
• 绝对不要显式传入undefined作为key，这和不传key的问题完全相同。

内容的提问来源于stack exchange，提问作者Ali Nawaz