React key值问题

报错:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `List`. See https://fb.me/react-warning-keys for more information.

    in ItemEditor (created by List)
    in List

1.解决方案:http://blog.csdn.net/liuzijiang1123/article/details/66974630;

2.可以设置new Map()对象;


var List = React.createClass({
  getInitialState:function(){
      return{
      key:0,
      list:new Map(),
      editList:new Map()
      }
      },
 
 add:function(){
  const key = ++this.state.key;
  this.state.editList.set(key,{value:''});
  this.forceUpdate();
 },
 
  render:function(){
const listDOM=[];
const editListDOM=[];

for(let item of this.state.list){
listDOM.push(<Item value={item.value} key={item}/>);
}
for(let item of this.state.editList){
editListDOM.push(<ItemEditor value={item.value}  key={item} />);
}
return(
<div>
  <div className="container">
<button className="btn btn-default" onClick={this.add}>Add</button>
<ul className="list-group">
  {listDOM}
  {editListDOM} 
</ul>
</div>
</div>
)
}
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值