已添加key仍触发React列表子元素需唯一key属性报错求助

这个报错的核心问题是：你把key加在了子组件内部的div上，但React要求key必须绑定在map遍历返回的直接顶层元素上——也就是父组件map里的<HomeFeatured>或者空片段，而非子组件内部的元素。

具体修正步骤： #

不管你渲染的是<HomeFeatured>还是空内容，都要给map返回的每个顶层元素加唯一key：

1. 如果渲染<HomeFeatured>，直接给组件本身加key={slug}（不要放在子组件内部的div上）
2. 如果是空内容，不能用<></>这种短片段（它不支持key属性），要换成完整的<React.Fragment>并加上key

代码示例： #

错误写法（导致报错）：

data.products.slice(0, 8).map(product => {
  if (product.onSale) {
    // key加在子组件内部，父组件map的元素无key
    return <HomeFeatured product={product} />;
  } else {
    // 短片段无key
    return <></>;
  }
})

修正后写法：

import React from 'react';

// ...

data.products.slice(0, 8).map(product => {
  const { slug } = product;
  if (product.onSale) {
    // 直接给HomeFeatured组件加key
    return <HomeFeatured key={slug} product={product} />;
  } else {
    // 用带key的完整Fragment替代短片段
    return <React.Fragment key={slug}></React.Fragment>;
  }
})

额外注意事项： #

• 确保slug是全局唯一的，如果有重复，换成产品的id等其他唯一标识
• 别用数组索引index当key，除非你的列表永远不会排序、新增或删除元素，否则会引发渲染异常和性能问题
• 组件内部的key不作用于父组件的列表，父组件只认自己map出来的顶层元素的key

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