调用this.setState后状态不变

Question

我正在从表单组件中获取数据，并尝试使用此数据设置应用程序组件的状态。

但是，state.data是一个空对象，不会更新数据。在设置模型数据是否存在之前，我会控制台记录模型数据。他们是模型中的数据。

Vector2 minPosition, maxPosition;

Answer 1

setState()是React中的异步调用。因此，您不太可能在下一行获得更新的状态值。要在状态更新成功后检查更新后的值，可以签入回调处理程序。

更改此

onSubmit = (model) => {
  console.log("Outer", model);
  this.setState({
    data: model
  });
  console.log("Form: ", this.state);
}

到

onSubmit = (model) => {
  console.log("Outer", model);
  this.setState({
    data: model
  }, () => {
    console.log("Form: ", this.state);
  });
}

Answer 2

根据react文档，setState是一个异步调用。您可以确保状态已更新，可以通过以下两种方式执行特定的操作：

1. 您可以向setState传递一个函数，该函数将具有您的当前状态和道具，并且您返回的值将是该组件的下一个状态。 请记住以下几点：

  

state是对更改时组件状态的引用   正在应用。它不应该直接突变。相反，变化   应该通过根据来自   状态和道具。

以下是一个示例：

 this.setState((state, props) => {
      //do something
      return {counter: state.counter + props.step};
    });

1. 您可以按照 Dinesh的中所述，将回调传递给setState函数 回答。成功更新状态后，将执行回调，从而确保您在回调中拥有更新的状态。

以下是一个示例：

this.setState({ ...new state }, () => {
 // do something
});

希望有帮助。

Answer 3

我只想补充一点，如果您愿意这样做，将无法正常工作：

this.setState({things} , console.log(this.state))

您必须将参考价传递给回调，而不是可执行代码本身。如果不这样做，该功能将在状态更新之前启用，即使您看到日志也是如此。