React.js用uuid/自增id做列表key仍报key prop不唯一错误如何解决？

你给DataRow设置的key是有效的，报错来自你定义的Data组件：该组件直接返回了包含多个<td>元素的数组，React要求所有以数组形式返回的同级React元素，每个都必须设置唯一的key属性，这和你外层map遍历的key无关。从报错栈里的at Data也能明确验证错误来源是这个组件。

你可以任选以下任意一种方案修复：

• 方案1：给Data返回的每个<td>设置唯一固定的key

const Data = (data) => [
    <td key="type">{data.type}</td>,
    <td key="place">{data.place}</td>,
    // 其余td都依次设置唯一的key即可
]

• 方案2：用React Fragment包裹所有<td>元素，不需要额外加key

// 用<>...</>简写形式
const Data = (data) => (
  <>
    <td>{data.type}</td>
    <td>{data.place}</td>
    // 其余td正常写即可
  </>
)

如果需要给Fragment设置属性，可以用完整写法：

import { Fragment } from 'react'
const Data = (data) => (
  <Fragment>
    <td>{data.type}</td>
    <td>{data.place}</td>
  </Fragment>
)

• 遇到key相关警告优先看报错栈指向的组件，不要默认认为是外层map的问题
• 只要在React中返回多个同级元素的数组，不管是动态生成还是静态写死的，都需要给每个元素加key
• 多元素返回优先用Fragment包裹，避免手动维护key的冗余

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