有了上节课的基础，这节课终于可以添加服务，为所欲为了，随意增加你想要的服务了。这节课我们就来增加一个躺式采耳服务，体验一把帝王级待遇。
让列表数据化
现在的列表还是写死的两个<li>标签，那要变成动态显示的，就需要把这个列表先进行数据化，然后再用javascript代码，循环在页面上。
我们先给上节课的 list 数组增加两个数组元素，代码如下：
constructor(props){
super(props) //调用父类的构造函数，固定写法
this.state={
inputValue:'mybj' , // input 中的值
//----------主要 代码--------start
list:['基础按摩','精油推背']
//----------主要 代码--------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>
)
}
完成上面的步骤，数据就不再是固定的了，而是动态管理的，也为我们接下来的添加打下了基础，剩下的步骤也显得很简单了。
增加服务选项
要增加服务选项，我们需要再增加按钮上先绑定一个方法this.addList(这个方法目前还没有，需要我们接下来建立).
<button onClick={this.addList.bind(this)}> 增加服务 </button>
接下来就是把this.addList方法，代码如下：
//增加服务的按钮响应方法
addList(){
this.setState({
list:[...this.state.list,this.state.inputValue]
})
}
这里需要说的市...这个是 ES6 的新语法，叫做扩展运算符。意思就是把 list 数组进行了分解，形成了新的数组，然后再进行组合。这种写法更简单和直观，所以推荐这种写法。
写完上面的代码，应该就可以实现增加项目了，你可以试着增加一下自己喜欢的服务进去，比如”美女踩背”……..
这个错误的大概意思就是缺少key 值。就是在用 map 循环时，需要设置一个不同的值，这个时 React 的要求。我们可以暂时用index+item的形式来实现。
<ul>
{
this.state.list.map((item,index)=>{
return <li key={index+item}>{item}</li>
})
}
</ul>
这样就解决了这个隐患，现在就可以舒服的享受帝王级的服务了。