React状态及表单基础

一、React状态不可变

概念：不要直接修改状态的值，而是基于当前状态创建新的状态值

数据添加

    // 数组的非直接性修改
    this.setState({
      list: [...this.state.list, 4, 5],
      person: {
        ...this.state.person,
        name: 'Yolo',
      },
    })

数值加一

    // 对象的直接性修改
    this.setState(prevState => ({
      count: prevState.count + 1,
    }))

删除数据

 // 数组直接删除
   this.setState({
       list: this.state.list.filter(item => item!== 2),
     })

主要实现代码

     <>
        <ul>
          {this.state.list.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <div>{this.state.person.name}</div>
        <div>
          {this.state.count} <button onClick={this.chickHandle}>+</button>
        </div>
      </>

---