react.js:3640 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `UserList`. See https://fb.me/re

简介: react.js:3640 Warning: Each child in an array or iterator should have a unique "key" prop.

react.js:3640 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of UserList. See https://fb.me/react-warning-keys for more information.
in h3 (created by UserList)
in UserList

加上 key , 如下:

render: function () {
            var createItem = function (u) {
                return (<h3 key={'li_' + u.id}> {u.username + ':' + JSON.stringify(u.roles)}</h3>);
            }
            return (
                    <ul>
                        {this.state.users.map(createItem)}
                    </ul>
            );
        }
相关文章
|
7月前
|
前端开发
react-router中的render、children、component
react-router中的render、children、component
259 1
|
前端开发 索引
react中什么情况下不能用index作为key
react中什么情况下不能用index作为key
171 0
|
2月前
|
JavaScript 前端开发 算法
写 React / Vue 项目时为什么要在列表组件中写 key
在React或Vue项目中,为列表组件中的每个元素添加唯一的key属性,有助于框架高效地更新和渲染列表。Key帮助虚拟DOM识别哪些项已更改、添加或删除,从而优化性能并减少不必要的重新渲染。
|
4月前
|
XML 前端开发 JavaScript
React 中render()的用途是什么?
【8月更文挑战第30天】
126 1
|
4月前
|
前端开发 测试技术
React 中 Render Prop 的概念
【8月更文挑战第31天】
37 0
|
6月前
|
JavaScript
【干货】js判断url是否是合法http/https
【干货】js判断url是否是合法http/https
|
6月前
|
前端开发 索引
解决React报错Encountered two children with the same key
解决React报错Encountered two children with the same key
|
7月前
|
前端开发 JavaScript 数据库
React一般可以用哪些值作为key?
React一般可以用哪些值作为key?
|
7月前
|
前端开发
React中render Props模式
React中render Props模式
|
7月前
|
前端开发 JavaScript
react的render什么时候渲染?
react的render什么时候渲染?
63 0