react修改状态

 

直接修改this.state数据不会响应式更新页面，

需要使用setState方法，而且setState是可能异步的（由 React 控制的事件处理过程 setState 不会同步更新 this.state），

一般有两种调用方式

//修改
this.setState(对象)  //浅合并state

this.setState((asyncState,prevProps)=>{
  //一般是用于在setState之前做一些操作
  //this.state==同步结果
  //asyncState==异步结果
  return {
    sname:value
  }
}) 

this.setState({
  sname:value
}, () => {
  //一般是用于在setState之后做一些操作
  //this.state == 修改之后的state
})

 

import React, {Component} from "react"
class  MyDom  extends Component{
    state={
        a:1,
        b:2,
        c:"1ww"
    }
//this.setstate({},()=>{})  异步更新后回调
//this.setstate(()=>{})  //直接获取更新后的状态
    modifyState=()=>{
        //setState方法函数第一个是修改后statte状态,第二参数是组件调用方传递的参数props
        this.setState((asyncState,prevprops)=>{
            this.state.b=0
            console.log(asyncState)
            console.log(prevprops)
            return {
                a:"a",
                d:4,
                b:this.state.b+1,
               // c:this.state.b+1,
                c:asyncState.b+1
            }
        })
    }
    render() {
        return (
            <div >Mydom
            <button onClick={this.modifyState}>修改</button>
            </div>

        )
    }
}
export default MyDom