React列表已设置唯一key仍报key prop缺失错误求助

你的报错来自两个React key使用的典型错误：

• key的作用是给React做数组项的diff对比标识，必须绑定在数组map方法返回的最外层直接子元素上，你把key写在了ListItem组件内部的<li>标签上，React遍历数组时根本读取不到这个属性，等于没加。
• 你在map返回时多套了一层空Fragment（<>...</>），这层Fragment才是数组遍历的直接子元素，你没有给它设置key，直接触发了控制台的报错，而且这层包裹完全没有存在的必要。

额外提一句：你现在用new Date()生成id的方式存在重复风险，毫秒级时间戳在短时间批量生成数据时很容易撞id，建议替换为更可靠的唯一id生成方案，比如浏览器原生的crypto.randomUUID()。

修复后代码 #

Leadboard 组件 #

把key移到map返回的ListItem上，删掉多余的Fragment包裹：

const Leadboard = () => {
  const [data, setData] = useState([
    {result:'5,63', time:'08.06.2022', id: crypto.randomUUID()}, 
    {result:'5,63', time:'08.06.2022', id: crypto.randomUUID()}, 
    {result:'5,63', time:'08.06.2022', id: crypto.randomUUID()}
  ]);

  const elements = data.map(item => {
    return <ListItem key={item.id} item={item} />
  });

  return(
    <div className='app-leadboard'>
      <span className='app-leadboard__title'>Your best results:</span>
      <ol className='app-leadboard__list' type='1'>
        {elements}
      </ol>
    </div>
  )
}

ListItem 组件 #

删掉<li>标签上多余的key属性：

const ListItem = ({item}) => {
  const {result, time} = item;
  return(
    <li className='list__item'>
      <span className='item__result'>{result} cps</span>
      <span className='item__date'>{time}</span>
      <button className='item__delete'>delete</button>
    </li>
  )
}

改完之后控制台的key报错就会消失。

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