Question

所以我有一个按钮。当您单击该按钮时，它会转到onSubmit函数，如下所示：

  onSubmit(e) {
      e.preventDefault();
      this.props.nextSentence(); //this is async

      this.setState({ //this is not yet updating with the right values then
          inputField: this.props.activePupil.name
      });
  }

但是：this.props.nextSentence();是异步的，所以当我立即设置状态时，没有任何变化。现在我有第二个按钮，它指的是第二个仅再次设置状态的功能。我想让这种情况自动发生。我怎么能这样做？

Answer 1

异步操作通常为Promises或functions with callbacks。

如果是Promise，您需要使用.then，如下所示

this.props.nextSentence().then(() => {
  this.setState({...});
})

如果是function with callback

this.props.nextSentence(() => {
  this.setState({...})
})

但请记住，您可以获取异步操作的返回响应并使用它来更新您的状态。通常就是这种情况。

例如

//here response is a json object returned from server     
this.props.nextSentence().then((response) => {
  this.setState({
    data: response.data
  });
})

React - 异步操作后立即设置状态

1 个答案: