React.js+Antd Grid出现‘Each child in a list should have a unique key’报错求助

不用更换组件，针对你遇到的情况，按以下步骤排查解决：

• 调整key的挂载层级
  不要直接把key绑定在Antd的Row组件上，React的key需要绑定在循环生成的最外层直接子元素上。部分Antd组件内部会额外生成DOM节点，可能导致key被“忽略”。示例代码：

  _.map(dataList, (item, index) => (
    // 新增一层容器，将key绑定在这里
    <div key={item.id || index}>
      <Row>
        <Col span={8}>{item.title}</Col>
        <Col span={16}>{item.content}</Col>
      </Row>
    </div>
  ))
  

• 优先使用数据唯一标识作为key
  尽量避免用index作为key（数据顺序变化时会引发React渲染异常），如果数组项有唯一ID（如item.id），直接用它作为key；如果没有，可结合字段生成唯一值，比如${item.name}-${index}，确保key不重复。

• 排查Modal内部的其他循环内容
  既然警告来自父组件Modal，检查Modal的title、footer或其他子元素中是否存在未加key的动态渲染列表，这些地方的遗漏也可能触发该警告。同时确保Modal的子元素被单一容器包裹（比如用<div>包裹所有内容），避免多根节点的情况。

• 验证key的唯一性
  打印你使用的key值（如console.log(item.id || index)），确认每一项的key都是唯一的，排除因数据重复导致的key冲突问题。

内容的提问来源于stack exchange，提问作者a.vilarinof