React JS中无数组key时解决列表渲染key警告的方法

直接用数组元素当key（优先推荐） #

如果你的数组里的元素（比如name1、name2）本身是唯一的，直接把元素值作为key就可以，完全满足React对key唯一性的要求，这是最简单靠谱的方案。代码示例：

const array = ['name1','name2','name3'];

function MyComponent() {
  return (
    <ul>
      {array.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

用数组索引当key（仅限静态列表） #

要是数组元素可能重复，而且列表只是静态展示（不会做排序、增删元素的操作），可以用数组的索引作为key。但注意：如果列表会动态修改（比如调整顺序、添加删除项），用索引会导致React无法正确追踪元素变化，引发渲染错误，这种情况别用。代码示例：

{array.map((item, index) => (
  <li key={index}>{item}</li>
))}

你之前的方法为啥不行 #

• Math.random()：每次组件渲染都会生成新的随机数，React会把每个元素都当成新节点重新渲染，严重影响性能，还可能出现重复的随机值，根本解决不了问题。
• 随意给数组加数字：如果只是给元素加固定数字，元素重复的话key还是会重复；如果是加索引，本质和用索引当key的问题一样，动态修改列表时会出问题。

内容的提问来源于stack exchange，提问作者Othman Jabes