Question

我不知道如何轻松解决问题。我有一个表格，用户可以填写表格并将其发送到我的数据库。表单具有自己的状态（例如，这里只是用户名）。我不知道在调度redux操作之后如何调用setState（向用户发送有关结果的消息）。函数postDataBegin很简单，仅显示微调器。我认为有一个问题，导致此功能是同步的（如果没有请告诉我）。我该如何解决？我应该学什么？

submitForm = e => {
  e.preventDefault();
  const { username } = this.state;
  if (!question) {
    this.setState({ messageToUser: "Fill the form" });
  } else {
    // onSubmit is redux action from props
    this.props.onSubmit(username);
    //HOW TO CALL THIS FUNCTION AFTER FUNC ABOVE?
    this.setState({ messageToUser: "Send" });
  }
};

<Form type="submit" onSubmit={this.submitForm}/>

export const postUserQuestion = username => dispatch => {
  dispatch(postDataBegin());
  return post(postUsernameAPI, username)
    .then(res => dispatch(postUsernameAPISucceeded(res)))
    .catch(error => dispatch(postUsernameAPIFailure(error)));
};

Answer 1

您的操作会返回一个承诺，因此您可以在其上使用then方法来提供回调：

submitForm = e => {
  e.preventDefault();
  const { username } = this.state;
  if (!question) {
    this.setState({ messageToUser: "Fill the form" });
  } else {
    // onSubmit is redux action from props
    this.props.onSubmit(username).then(() => {
      this.setState({ messageToUser: "Send" });
    });
  }
};

最好将数据也存储在reducer上，并在提交表单的同时进行更改。

在与Redux反应中调度动作

1 个答案: