数据无ID属性时，React遍历数组可用什么作为key？

关于用index当key的安全性 #

如果你的列表完全静态，不会有排序、增删、筛选这类改变元素顺序或数量的操作，用index当key是安全的——它能消除React的警告，也不会引发任何渲染问题。但如果列表有动态操作（比如用户可以排序、添加删除条目），绝对不能用index，否则会导致React错误复用组件实例，出现状态错乱、渲染异常的问题，正如官方文档所说：

我们不推荐在列表项顺序可能发生变化时使用索引作为key。

替代方案推荐 #

如果列表有动态操作，或者你想规避index的潜在风险，试试这两种方法：

• 基于对象内容生成唯一哈希值
  把对象的所有属性（按固定顺序拼接，避免因属性顺序不同导致哈希不一致）转换成字符串，再通过哈希函数生成唯一key。示例代码：

  import crypto from 'crypto';
  
  // 生成基于对象内容的哈希key
  const generateItemKey = (item) => {
    // 先排序属性，确保相同内容的对象生成的字符串一致
    const sortedKeys = Object.keys(item).sort();
    const itemStr = sortedKeys.map(key => `${key}:${JSON.stringify(item[key])}`).join('|');
    return crypto.createHash('sha256').update(itemStr).digest('hex');
  };
  
  // 渲染列表时使用
  {dataList.map(item => (
    <ListItem key={generateItemKey(item)} {...item} />
  ))}
  

  注意：如果对象内容会动态更新，每次渲染都会重新计算哈希，可能导致组件频繁卸载重挂载，这时候可以用useMemo缓存生成的key。

• 给对象添加前端临时唯一ID
  拿到API返回的数组后，给每个对象手动添加一个前端生成的唯一ID，比如用uuid库：

  import { v4 as uuidv4 } from 'uuid';
  
  // 给原数组每个元素添加临时ID
  const dataWithTempId = dataList.map(item => ({ ...item, tempKey: uuidv4() }));
  
  // 渲染时用这个临时ID当key
  {dataWithTempId.map(item => (
    <ListItem key={item.tempKey} {...item} />
  ))}
  

  这个方案的优势是ID只生成一次（除非重新获取数据），不会有哈希方案的性能损耗，完全能应对列表的各种动态操作。

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