React列表子元素需唯一key prop错误排查与解决求助

问题根源 #

你在Products组件的map循环中使用了key={item.id}，但从Product组件的代码（Link to={/product/${item._id}}）可以看出，你的产品对象的唯一ID字段是_id（MongoDB默认主键字段），而非id。这意味着你设置的key值实际是undefined，所有子元素的key完全相同，触发了React的key唯一性校验错误。

修复方案 #

将Products组件中两个map循环的key值替换为item._id：

return (
  <Container>
    {cat
      ? filteredProducts.map((item) => <Product item={item} key={item._id} />)
      : products
          .slice(0, 8)
          .map((item) => <Product item={item} key={item._id} />)}
  </Container>
);

额外注意事项 #

• 所有通过map生成的列表子元素，key必须绑定数据的唯一标识字段（如数据库主键），不能用随机值或索引（列表排序/过滤时索引会变化，导致React错误复用组件）
• 检查项目中其他map循环，确保都遵循key唯一性规则

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