Warning: Each child in an array or iterator should have a unique "key" prop. Check the render ...-优快云博客

本文介绍了在React项目中遇到的警告：每个子元素在数组或迭代器中应该有一个唯一的key prop。通过为map循环中的元素添加key属性，解决了此问题，并展示了具体的代码实现。

使用react时报

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render ...错误

ReactDOM.render(<Header/>,document.getElementById('head'));
var Sectiond = React.createClass({
getInitialState:function(){
return {
_list:null
}
},
componentDidMount:function(){
$.get(this.props.url,function(e){
this.setState({
_list:e.data
})
}.bind(this))
},
//得到过期日期
gettime:function(time){
var _time = time.replace(/-/g,'/');
var date1 = new Date(_time).getTime(),
date2 = new Date().getTime();
var diff = date1 - date2;
var day = parseInt(diff / 1000 / 60 / 60 / 24),
h=parseInt(diff/1000/60/60),
m=parseInt(diff/1000/60),
s=parseInt(diff/1000);
var n = day >= 1 ? day + '天后到期' : (h >= 1 ? h + '小时后过期' : (m >= 1 ? m + '分钟后过期' : '已过期'));
return n
},
handclick:function(){
var a = this;
var nowdom = a.refs.DEMO;
$(nowdom).addClass('circle_check');
$(nowdom).parents('li').siblings().find('.circle_nei').removeClass('circle_check');
$.get(this.props.sorces,{accountId:$(nowdom).parents('a').attr('name')},
function(d){
if(d.code == 200){
console.log(d.msg);
}else{
console.log(d.msg);
}
}.bind(this)
)
},
render:function(){
var that = this;
var d = that.state._list,templte;
if(d){
templte = d.map(function(v,r){
var s = v.deal == '1' ? 'circle_check' : '';
var m = v.tradeType == '1' ? '实盘' : '模拟';
var g = v.unusableDate ? that.gettime(v.unusableDate) : '该账号已过期';
var h = v.tradeType == '2' ? g : '';
var p = (v.createTime.substring(0,11)).replace(/-/g,'/');
return (
<li>
<a href="javascript:;;" className="liContent" name={v.id} onClick={that.handclick}>
<div className="liContent_count liContent_left">
<div className="circle_wai">
<div className={"circle_nei"+" " +s} ref="DEMO"></div>
</div>
</div>
<div className="liContent_count liContent_center">
<span>{m + v.account}</span>
<span>{p}开设</span>
</div>
<div className="liContent_count liContent_right">
<span>{h}</span>
</div>
</a>
</li>
)
})
}else{
templte="";
}
return(
<ul className="trade_list createaccount">
{templte}
</ul>
)
}
})
ReactDOM.render(<Sectiond sorces="http://forex2.esongbai.xyz/user/userAccount/changeCurrentUserAccount.do" url="http://forex2.esongbai.xyz/user/userAccount/userAccountList.do"/>,document.getElementById('account_content'))

更改办法，在循环体里加上 key={i}即可

ReactDOM.render(<Header/>,document.getElementById('head'));
var Sectiond = React.createClass({
getInitialState:function(){
return {
_list:null
}
},
componentDidMount:function(){
$.get(this.props.url,function(e){
this.setState({
_list:e.data
})
}.bind(this))
},
//得到过期日期
gettime:function(time){
var _time = time.replace(/-/g,'/');
var date1 = new Date(_time).getTime(),
date2 = new Date().getTime();
var diff = date1 - date2;
var day = parseInt(diff / 1000 / 60 / 60 / 24),
h=parseInt(diff/1000/60/60),
m=parseInt(diff/1000/60),
s=parseInt(diff/1000);
var n = day >= 1 ? day + '天后到期' : (h >= 1 ? h + '小时后过期' : (m >= 1 ? m + '分钟后过期' : '已过期'));
return n
},
handclick:function(){
var a = this;
var nowdom = a.refs.DEMO;
$(nowdom).addClass('circle_check');
$(nowdom).parents('li').siblings().find('.circle_nei').removeClass('circle_check');
$.get(this.props.sorces,{accountId:$(nowdom).parents('a').attr('name')},
function(d){
if(d.code == 200){
console.log(d.msg);
}else{
console.log(d.msg);
}
}.bind(this)
)
},
render:function(){
var that = this;
var d = that.state._list,templte;
if(d){
templte = d.map(function(v,r){
var s = v.deal == '1' ? 'circle_check' : '';
var m = v.tradeType == '1' ? '实盘' : '模拟';
var g = v.unusableDate ? that.gettime(v.unusableDate) : '该账号已过期';
var h = v.tradeType == '2' ? g : '';
var p = (v.createTime.substring(0,11)).replace(/-/g,'/');
return (
<li key={r}>
<a href="javascript:;;" className="liContent" name={v.id} onClick={that.handclick}>
<div className="liContent_count liContent_left">
<div className="circle_wai">
<div className={"circle_nei"+" " +s} ref="DEMO"></div>
</div>
</div>
<div className="liContent_count liContent_center">
<span>{m + v.account}</span>
<span>{p}开设</span>
</div>
<div className="liContent_count liContent_right">
<span>{h}</span>
</div>
</a>
</li>
)
})
}else{
templte="";
}
return(
<ul className="trade_list createaccount">
{templte}
</ul>
)
}
})
ReactDOM.render(<Sectiond sorces="http://forex2.esongbai.xyz/user/userAccount/changeCurrentUserAccount.do" url="http://forex2.esongbai.xyz/user/userAccount/userAccountList.do"/>,document.getElementById('account_content'))