React前端开发 - 解决报错：Warning: Each c

使用React框架开发前端页面，控制台报错如下：

React开发前端页面控制台报错.png

错误原因：

控制台错误提示：list中的每个子组件应该有一个唯一的key

React在渲染过程中，使用组件的key来标识这个组件是否被重新渲染。因此我们需要在循环的每个子项或子组件中添加一个key属性，如下示例：

<ul>
    {
      ["one", "two", "three"].map(item => <li key={item}>{item}</li>)
    }
</ul>

那么React在渲染过程中，怎么使用组件的key来标识组件是否被重新渲染呢？

如下示例：如果<b>中没有设置key属性，则React会重新渲染整个行；如果<b>中设置了key属性，则只更新item.city

React.createClass({
    render: function() {
        var data = [{name: 'Jack', age:28, city:'Beijing'},
                    {name: 'Tom', age:41, city:'Shanghai'}
                   ];
        return (
            <div>
            {
                data.map(function(item, i){
                    return <div className={"row"} key={i}>
                           {[ item.name,
                              // remove the key
                              <b className="" key={i}> {item.city} </b>,
                              item.age  
                            ]}   
                           </div>;
                })
            }
            </div>
        );
    }
})

React渲染过程：

• 由组件创建一个虚拟DOM树：vDOM(内存中)
• React将组件插入实际DOM中
• React检测到状态变化并更新实际DOM来与vDOM同步

解决方法：

解决问题的方法已经很明确了，查代码发现在循环中子项没有设置key属性，加上后不再报错。

let name = fileName.split(',').map((item) => {
      return (
          <div key={item}>{item}<br/></div>
      )
})

---

附录：相关文章链接如下：
https://sentry.io/answers/unique-key-prop/
https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js