直接修改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