Question

我在理解异步调用的概念时遇到了问题。

我的州：sentence: { author: '', context: '', date: '' }

然后我有一个更新Redux状态的函数：

edit(author, date) {
    let { sentence } = this.props;
    this.props.updateAuthor(sentence, author);
    this.props.updateDate(sentence, date)
}

这些更新方法是不同的操作，并且具有不同的reducer。

更新状态属性后，我希望通过以下方式将数据发送到服务器：

function uploadToServer() {
    this.props.upload(this.props.sentence);
}

在完成更新后，我迷失了如何调用上传功能。

Answer 1

一种方法是使用componentDidUpdate或componentWillReceiveProps生命周期方法检查新道具是否包含您想要的更改，然后从那里执行this.props.upload。像

这样的东西

componentWillReceiveProps (newProps) {
  // check if your state is updated with the attributes
  // this function will get called when it's going to receive new props,
  // in this case, when the redux store gets changed
  // this.props will be the unchanged props, newProps will be the changed props
  // then do this.props.upload()
}

Answer 2

在同一个函数中进行两次更新并将回调传递给此函数：

edit(author, date) {
  const { sentence, updateAuthorAndDate } = this.props
  updateAuthorAndDate(sentence, author, date, this.uploadToServer)
}

然后在updateAuthorAndDate中，只需在完成更新时调用回调：

updateAuthorAndDate(sentence, author, date, uploadToServer) {
  // update the author
  // update the date
  // then call the callback when the updates are done:
  uploadToServer()
}

使用setState时要小心（如果使用Redux，可能不会）。 setState是异步的，因此您需要在第二个参数中调用回调：

this.setState({ ... }, /* called when the update is done */ uploadToServer)

如何在状态更新后调用异步函数？

2 个答案: