列表中的每个孩子都应该有一个独特的"key"道具。(我使用了密钥仍然收到此错误)

Question

由于我使用了密钥，所以仍然会出现此错误。

<>
<h1>Latest Products</h1>
{loading ? (
<h2>loading...</h2>
) : error ? (
<h3>{error}</h3> 
) :  
<Row>

{products.map((product) => (
<Col key={product._id} sm={12} md={6} lg={4} xl={3}>

<Product product={product} />
</Col>
))}
</Row>}
</>

这里的问题是什么以及如何解决。

Answer 1

我认为是产品_id未定义，因此所有数组元素的值都相同。请对产品进行控制台操作_id。

Answer 2

正如其他人所指出的，product._id可能是undefined，也可能不是唯一值(这本身就很糟糕(。您可以通过将index附加到product._id值来修复错误：

<Row>
{products.map((product, index) => (
<Col key={`${product._id}-${index}`} sm={12} md={6} lg={4} xl={3}>
<Product product={product} />
</Col>
))}
</Row>;