四、列表和Keys
渲染列表数据是非常常见的场景,例如做一个展示用户的列表,需要根据获取的用户数据进行渲染列表。
class UserList extends Component { constructor() { this.state = { userList:[ { id: '23243', info:{ name: 'sxww', age: 26 } }, { id: '232434', info:{ name: 'zzz', age: 28 } }, ] }, this,handleClick = this.handleClick.bind(this); //es6class中,必须手动绑定方法this的指向 } handleClick(id) { const userList = this.state.userList.map(item => { const newItem = item.id === id ? {...item,vote: ++item.vote} : item; return newItem; }) this.setState({ userList }) } render() { return ( <ul> { this.state.userList.map(item => <User info={item.info} handleClick={this.handleClick} /> ) } </ul> ) } } export default UserList;
运行后控制台报错:
应该为列表每一项添加key(一般使用列表数据的id作为key),React用Key标记每个元素,当数据变化时,React可以通过key知道哪些元素发生变化,从而只渲染发生变化的元素,提高渲染效率。
<User info={item.info} handleClick={this.handleClick} key={item.id}/>
不推荐使用索引作为key,因为一旦列表中的数据发生重排,数据的索引也会改变,不利于react渲染。列表元素的key不能重复,但只限于当前列表,不是全局唯一。
标签:userList,Keys,渲染,基础,列表,item,key,id From: https://www.cnblogs.com/sxww-zyt/p/16810721.html