如何解决HomeScreen中列表子元素缺少唯一key prop的警告？

控制台警告提示：

Each Child in a list should have a unique "key" prop

针对你的情况，按以下步骤排查解决：

• 检查HomeScreen中列表渲染的层级
  你提到涉及Stack(<FeaturedRow/>)，要确认FeaturedRow是在map循环中渲染的。如果Stack是包裹每个FeaturedRow的外层组件，那key应该直接加在Stack组件上，而不是FeaturedRow上。示例代码：

  {categories.map(category => (
    <Stack key={category.id}>
      <FeaturedRow
        id={category.id}
        title={category.name}
        description={category.short_description}
      />
    </Stack>
  ))}
  

  React要求key必须放在列表循环的最外层直接子元素上，否则警告依然会出现。

• 验证category.id的唯一性
  虽然你更新了Sanity的schemas，还是要确认每个分类的id是真正唯一的。可以在HomeScreen的循环里打印category.id：

  console.log('Category ID:', category.id)
  

  如果发现有重复的id，改用Sanity自动生成的_id字段（该字段在Sanity中全局唯一），或者用category._id作为key值。

• 排查FeaturedRow组件内部的列表渲染
  警告也可能来自FeaturedRow组件内部。如果这个组件里自己有渲染列表（比如展示分类下的商品），那内部循环的每个子元素也需要添加唯一的key属性。检查组件内部的map循环，确保每个子项都有唯一key。

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