[英]How to fix reactjs warning: each child in an array should have a unique prop…?
I am running my reactjs app and getting a warning in my console: 我正在运行我的reactjs应用程序并在控制台中收到警告:
Warning: Each child in an array or iterator should have a unique "key" prop.
警告:数组或迭代器中的每个子代都应具有唯一的“键”道具。 Check the render method of
AppointmentsContainer
检查
AppointmentsContainer
的渲染方法
My component looks like this: 我的组件看起来像这样:
export default class AppointmentsContainer extends Component {
constructor(props) {
super(props);
}
render() {
//todo remove
//debugger;
let appointments = mockData.data;
return (
<div>
//loop through the appointments
{appointments.map(function(a,i){
//todo remove
//console.log('testing=a', a);
return <p><Appointment key={i}/></p>
})}
</div>
);
}
}
I am passing in a key now but still the warning comes up? 我现在正在传递钥匙,但仍然会发出警告? How can I fix this?
我怎样才能解决这个问题?
You need to put the key in the p
element instead of Appointment
. 您需要将键放在
p
元素而不是Appointment
。 Since Appointment
is the only child of p
, it does not need a key. 由于
Appointment
是p
的唯一子项,因此不需要键。
Adding a key will not perform any extra functionality but still to remove the warning you can replace your code with 添加密钥不会执行任何其他功能,但是仍然可以消除警告,您可以将代码替换为
return <p key={i}><Appointment/></p>
Or you can keep change your code to 或者您可以继续将代码更改为
<div>
//loop through the appointments
{appointments.map(function(a,i){
//todo remove
//console.log('testing=a', a);
return <Appointment key={i}/>
})}
</div>
And in Appointment component you can access it as 在约会组件中,您可以按以下方式访问它
<div>
<p>{this.props}</p>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.