本节主要介绍React中列表循环展示数据以及事件的绑定。
1. 列表循环数据化
目前Child.js组件中的<li>标签内的数据是静态的，也就是死的。如果要换成动态的。就需要把这个列表进行数据化之后再用JavaScript代码循环在页面上。
首先，在上一节中。定义过了一个空的list数组。这节课先把list数组添加两个数组元素。代码如下：
// 省略上面部分无关代码
constructor(props) {
super(props)
this.state = {
inputValue: 'test',
// --- 主要代码 start ---
list: ['测试文字1', '测试文字2']
// --- 主要代码 end ---
}
}
有了数据之后，可以在利用JSX部分进行循环输出，代码如下：
// 省略上面部分无关代码
render() {
return (
// 根部文件包裹起来
<Fragment>
<div>
<input value = {this.state.inputValue} onChange = {this.inputChange.bind(this)} />
<button>增加</button>
</div>
<ul>
{
this.state.list.map((item, index) => {
return <li>{item}</li>
})
}
</ul>
</Fragment>
)
}
通过上述代码，返回浏览器页面之后发现数据就不再是固定的了。
2. 增加数据选项
要增加项目，需要在增加按钮上绑定一个方法this.addItem(这个方法目前还没有，需要自己建立)
<button onClick = {this.addItem.bind(this)}> 增加 </button>
接下来就是定义增加的方法函数，注意: 写在render()之外。
addItem() {
this.setState({
list: [...this.state.list, this.state.inputValue],
// 这段代码用于将输入项新增到项目之后情况输入框
inputValue: ''
})
}
上述代码要说的是...这个属于es6的扩展运算符，意思就是将list数组进行分解，和后面的this.state.inputValue变量组合形成一个新的数组。这种写法更简单和直观。因此比较推荐这样。
另外：之所以不用push方法是因为：
-
this.state里面定义的数据必须通过this.setState来改变。这个涉及到单向数据流。
-
push方法返回的是新数组的长度，是数字，而不是新的数组。
3. 解决key值错误
此时，再返回浏览器打开F12控制台就会发现有报错。根据报错可以简单看出是Key值没有设置。Key的作用涉及到在虚拟DOM中因为比对而导致的性能问题。因此建议在写循环的时候都加上Key值。这个现在也是React的硬性要求。同时，Key值在该循环中必须是独一无二的。
解决方式如下：
<ul>
{
this.state.list.map((item, index) => {
return <li key = {index + item}>{item}</li>
})
}
</ul>
注：一般开发人员在写Key值的时候喜欢用index。这在长久来看对性能是有影响的。很多公司后端接口中会返回一个字段，里面包含的是一个独一无二的值。如果后端没有返回这个字段的话，可以尝试使用上面的方式。index + item，这样就能尽可能的防止重复。
