React循环渲染报列表子元素需唯一key prop警告如何解决

警告触发原因 #

循环渲染同层级列表元素时，未给组件添加key属性，React无法通过唯一标识识别元素的增删、排序、状态更新，虚拟DOM diff效率下降，因此抛出该警告。

key取值规则 #

• 第一优先级：使用当前列表项自带的、在列表范围内永久唯一的业务字段，比如数据项自带的id、不会重复的dataKey等，该方案性能最优，适配所有列表操作场景
• 第二优先级：如果列表是完全静态的，不存在增删、排序、过滤、头部插入项的操作，可以直接用循环索引i作为key，不会引发问题
• 禁止使用两类值作为key：一类是每次渲染都会变动的值，比如Math.random()、实时生成的时间戳，这类值会导致React每次渲染都判定元素为全新节点，引发不必要的重渲染，还会丢失组件内部状态；另一类是整个数据对象，对象会被隐式转换为相同的"[object Object]"字符串，直接导致所有项key重复，这也是你之前直接传payload[i]作为key不生效的原因。

代码修正 #

在你循环生成的Typography组件上补充key属性即可，如果你确认payload中每一项的dataKey不会重复，优先用dataKey作为key：

var states = [];
for(var i = 0; i < payload.length; i++){
  console.log("i " + i);
  states.push(
    <Typography
      key={payload[i].dataKey} // 若dataKey存在重复，可替换为索引i
      sx={{ fontSize: 14 }}
      color={payload[i].fill}
    >
      {`${payload[i].dataKey} : ${payload[i].value}`}
    </Typography>
  )
}

return (
  // 其余业务代码
  {states}
);

注意：如果列表后续会做动态排序、中间/头部插入删除项的操作，不要用索引作为key，否则会出现组件状态错位、渲染内容异常的问题，必须使用业务层面的唯一字段作为key。

运行效果参考 #

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