如何解决列表中的每个孩子应该有一个独特的关键道具问题
早上好, 我遇到一个小问题。我想要有productdetails页面,其中显示了该产品的所有信息。您可以通过点击产品链接来做到这一点。但是我得到了以下错误:列表中的每个孩子都应该有一个唯一的关键道具问题
代码主页:
version: '3.3'
services:
mongodb:
image: mongo
container_name: mongodb
volumes:
- mongodata:/data/db
ports:
- 27017:27017
volumes:
mongodata:
代码产品页:
import React from 'react';
import data from '../data'
import { Link } from 'react-router-dom';
function Homescreen (props){
return <ul className="products" >
{ data.products.map(product =>
<li key={product}>
<div className="product-card">
<Link to={'/product/' + product._id}>
<img className="product-image" src={product.image} alt="product"></img>
</Link>
<Link to={'/product/' + product._id}><h1 className="product-name">{product.name}</h1></Link>
<p className="product-price">€{product.price}</p>
<div className="product.rating">Stars ({product.numReviews})</div>
<form method="post">
<button type="submit">Add to cart</button>
</form>
</div>
</li>
)
}
</ul>
}
export default Homescreen;
解决方法
您应该更改:
<li key={product}>
收件人(假设您的ID是唯一的)
<li key={product._id}>
选择键的最佳方法是使用一个字符串,该字符串唯一地标识其同级项中的列表项,您可以检查更多here
,如{{3}}
所述“键”是一种特殊的字符串属性,在创建元素列表时需要包括在内。
因此,key
不能像您在此处使用它一样是对象,而必须是String
。如果您的产品没有唯一标识符,则可以选择使用地图方法的index
。
如果您对呈现的项目没有稳定的ID,则可以将项目索引用作最后的选择:
// Example from the ReactjS Website
const todoItems = todos.map((todo,index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。