如何修复React中「列表子元素需拥有唯一key属性」警告？

问题根源 #

你现在用designModdulle.epreuves.nature_epreuve作为<li>的key，但这个值在designModdulles数组的多个元素里重复了，React没法区分每个列表项，所以抛出了这个警告。

几种可行的解决办法 #

1. 用数据自带的唯一ID #

如果你的designModdulles数组里每个对象都有唯一标识（比如id、epreuveId这类字段），直接拿它当key就好：

<div>
  <ul>
    {designModdulles.map((designModdulle) => (
      <li key={designModdulle.id}>{designModdulle.epreuves.nature_epreuve}</li>
    ))}
  </ul>
</div>

2. 结合索引和现有值生成唯一key #

要是数据里没天然的唯一ID，可以把数组索引和nature_epreuve拼起来，保证key不重复：

<div>
  <ul>
    {designModdulles.map((designModdulle, index) => (
      <li key={`${designModdulle.epreuves.nature_epreuve}-${index}`}>{designModdulle.epreuves.nature_epreuve}</li>
    ))}
  </ul>
</div>

注意：这种方式只适合列表不会重新排序、增删的场景，不然可能影响React的渲染效率。

3. 生成唯一UUID（适合列表有动态操作的情况） #

如果列表经常有增删改操作，建议给每个元素生成唯一的UUID：
先安装uuid库（npm install uuid），然后引入使用：

import { v4 as uuidv4 } from 'uuid';

<div>
  <ul>
    {designModdulles.map((designModdulle) => (
      <li key={uuidv4()}>{designModdulle.epreuves.nature_epreuve}</li>
    ))}
  </ul>
</div>

不过这种方法每次渲染都会生成新的UUID，可能导致不必要的重渲染，优先考虑前两种方案。

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