使用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
