React状态不可变

不能直接修改状态的值，而是基于当前状态创建新的状态值

案例↓

import React from 'react'

class Counter extends React.Component {
  state = {
    counter: 0,
    list:[1,2,3],
    person:{
      name: 'Xying',
      age: 22
    }
  }

  render() {
    return (
      <div>
        count: {this.state.counter}
        <button onClick={()=>this.AddCount()}>点击</button><br/>
        <ul>
          {this.state.list.map((item)=><li key={item}>{item}</li>)}<br/>
        </ul>
        对象名字：{this.state.person.name}
      </div>
    )
  }
  AddCount(){
    this.setState({
      counter: this.state.counter + 1,
      list: [...this.state.list,4,5],
      //合并修改
      person:{
        ...this.state.person,
        name: '夏大爷'
      }
    })
    //删除 - filter
    this.setState({
      list: this.state.list.filter(item => item !==2)
    })
  }
  
}

function App() {
  return (
    <div>
      <Counter/>
    </div>
  )
}


export default App;