Redux 表单提交验证与 redux thunk

Question

在我的表单中，我试图通过使用响应式thunk 来检查电子邮件，以确定电子邮件地址是否已收到。一切正常，除了一件事。我请求 api 并将数据发送到减速器，但我有权访问状态的组件是空的。因为组件中的状态值是在reducer之前工作的。

有什么帮助吗？

提交.js

onSubmit = data => {
    const { saveUser, validateEmail, emailValidate } = this.props;
    validateEmail(data.email); // action create for api request
    console.log(emailValidate); // fetch data in reducer(This data is empty because code run before reducer set state)
    if (emailValidate.statusMessage === 'OK') {
      throw new SubmissionError({ email: 'Email already in use', _error: 'Login failed!' });
    } else {

    }
  }

const mapDispatchToProps = (dispatch) => {
    validateEmail(email) {
      dispatch(validateEmail(email));
    },
  };
};
const mapStateToProps = (state) => ({
  emailValidate: state.registrationFormEmailValidate.data,
});

Answer 1

onSubmit = data => {
  const { saveUser, validateEmail, emailValidate } = this.props;
  validateEmail(data.email); // action create for api request
}

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.emailValidate.statusMessage !== prevProps.emailValidate.statusMessage) {
    console.log(this.props.emailValidate);
    if (this.props.emailValidate.statusMessage === 'OK') {
      throw new SubmissionError({ email: 'Email already in use', _error: 'Login failed!' });
    } else {

    }
  }
}

如果你使用class component，你可以使用componentDidUpdate()