为什么我收到“列表中的每个孩子都应该有一个唯一的“key”道具”，即使我的代码有一个密钥？

Question

我有一个 API 端点来获取所有产品。它运作良好。现在我尝试使用 redux 在前端获取并显示数据（即使有 redux-toolkit，我这样做是为了学习目的）。我可以使用 redux-dev-tool 查看获取的数据。但页面上不显示。虽然我提供了一个唯一的密钥，但我得到了，列表中的每个孩子都应该有一个唯一的“密钥”道具 - 在我的控制台中。

这是我的主页组件

const Home = ()=>{
    const dispatch = useDispatch()
    const { loading, error, products } = useSelector((state) => state.products);
//I can view the data here when I use console.log
    useEffect(() => {
      dispatch(getProduct())
    }, [dispatch])
    return(
<Fragment>
    <h2 className='homeHeading'>Featured Products</h2>
    <div className='container' id='container'>
    {products &&
              products.map((product) => (
                 <h1 key={product._id}>{product.name}</h1>
              ))}
    </div>
</Fragment>
    )
}
export default Home

Answer 1

尝试使用以下因素进行调试。

1. 检查 products.map 或其他地图是否抛出错误。

2. 如果仅用于产品数组，那么很可能您会在数组中获得重复的 id。 ID 应始终是唯一的，但您可以向密钥添加后缀。

3. 当您从 api 获取数据时，添加 null 检查

   {产品 && 产品？.map((产品，索引) =>

   {产品？.名称})}