初学React,setState后获取到的thisstate没变,还是初始state?

问题: (javascript)初学React,setState后获取到的thisstate没变,还是初始state?
描述:

getInitialState(){
            return {data:[]};
          },componentDidMount(){
            var data = [ { author: "Pete Hunt",text: "This is one comment" },{ author: "Jordan Walke",text: "This is *another* comment" } ];
            (function(data){
              this.setState({data:data});
              console.log(this.state.data);
            }).call(this,data);
          },

为什么log里打出来的data是[]呢?


解决方案1:

react 的 setState 是异步执行的,所以你后面立即 console 是还没改变状态, setState 函数接受两个参数,一个是一个对象,就是设置的状态,还有一个是一个回调函数,就是设置状态成功之后执行的,你可以这样:

(function(data){
   var that = this;
   this.setState({data:data},function () {
       console.log(that.state.data);
   });
}).call(this,data);

解决方案2:

不能立即 console.log(this.state.data);的,你可以在 render方法里取

解决方案3:

善用官方文档:

void setState(
  function|object nextState,[function callback]
)

The second (optional) parameter is a callback function that will be executed once setState is completed and the component is re-rendered.

所以正确做法是

this.setState(
    Object.assign({},{ data }),() => console.log(this.state)
)

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...