React 列表添加数据

让列表数据化

现在的列表还是写死的两个

• 标签，那要变成动态显示的，就需要把这个列表先进行数据化，然后再用javascript代码，循环在页面上。

• 我们先给上节课的list数组增加两个数组元素，代码如下：

      constructor(props){  构造函数
          // 调用父类方法，继承
          super(props) 
          this.state = {
              inputValue:"", //value的数据
              list:["基础按摩","推背"]   //类表数据
          }
      }
  

  有了数据后，可以在JSX部分进行循环输出，代码如下：

      render(){
          return(
              // 最外层只能有一个div ,如果使用flex布局不需要div包括，可以使用Fragment包括
              <Fragment>
                  <div> 
                      {/* 这里可以使用js代码 使用{}括起来 onChange事件*/}
                      <input value={this.state.inputValue} onChange={this.inputChange}/>  
                      <button>增加服务</button></div>
                  <ul>
                      {
                          this.state.list.map((item,index)=>{
                          return <li>{item}</li>
                          })
                      }
                  </ul>
              </Fragment>
          )
      }
  

  完成上面的步骤，数据就不再是固定的了，而是动态管理的，也为我们接下来的添加打下了基础，剩下的步骤也显得很简单了。

  增加服务选项

  要增加服务选项，我们需要再增加按钮上先绑定一个方法this.addList(这个方法目前还没有，需要我们接下来建立).

    <button onClick={this.buttonOnClick}>增加服务</button></div>
  

  接下来就是把this.buttonOnClick方法，代码如下：

      buttonOnClick=()=>{
          // 正加列表的数据
          this.setState({
              // 扩展运算符
              list:[...this.state.list,this.state.inputValue],
              inputValue:""  //正加后input框的值为空
  
          })
      }
  

  这里需要说的市…这个是ES6的新语法，叫做扩展运算符。意思就是把list数组进行了分解，形成了新的数组，然后再进行组合。这种写法更简单和直观，所以推荐这种写法。

  写完上面的代码，应该就可以实现增加项目了，你可以试着增加一下自己喜欢的服务进去，比如"中药泡脚"…

  解决key值错误

  高兴的同时其实是有一些隐患的，打开浏览器的控制台F12,可以清楚的看到报错了。这个错误的大概意思就是缺少key值。就是在用map循环时，需要设置一个不同的值，这个时React的要求。我们可以暂时用index+item的形式来实现。

    return <li key={index+item}>{item}</li>
  

  技术胖第一博客网站：https://jspang.com/detailed?id=46#toc220