Question

我有一个类似于默认ReactJS教程的反应应用程序。

我在提交表单后调用的组件中有一个函数，如下所示：

getInitialState: function () {
  return {
    name: "First Product",
    showOwner: true
  }
},

handleFormSubmit: function (name) {
  console.log(name); //Returns "Hello world"
  console.log(this.state.name); // Returns "First Product"

  this.setState({name: name});
  this.setState({showOwner: false});

  console.log(this.state.name); // Returns "First Product" still
}

出于某种原因，当我在React开发人员工具中查看它时，它显示this.state.name IS 被设置为新值，但是当我在console.log中显示它仍然显示第一个值而不是＆＃34; Hello World＆＃34;？

Answer 1

来自https://facebook.github.io/react/docs/component-api.html的文档：

setState()不会立即改变this.state，但会创建待处理状态转换。 在调用此方法后访问this.state可能会返回现有值。

无法保证对setState的调用进行同步操作，并且可以对调用进行批处理以获得性能提升。

另外：

第二个（可选）参数是一个回调函数，它将在setState完成并重新呈现组件后执行。

因此，根据文档，您可能需要使用代码：

handleFormSubmit: function (name) {
  console.log(name); //Returns "Hello world"
  console.log(this.state.name); // Returns "First Product"

  this.setState({
    name: name,
    showOwner: false
  }, function() {
    // Should return "Hello world" after the state has been set.
    console.log(this.state.name);
  }.bind(this));

  // Returns "First Product" still, since setState is not synchronous
  console.log(this.state.name);
}

我不知道反应，但这就是文档所说的内容，我没有理由相信这样做不起作用。

国家保存，但说不是

1 个答案: