Как заставить компонент ждать асинхронного действия

Question

У меня есть этот код формы ниже:

submitForm = (e) => {
    e.preventDefault();

    const { user } = this.state;
    const { dispatch } = this.props;
    if (user.firstName && user.lastName && user.userName && user.password) {
        this.props.dispatch(userActions.register(user));
    } else {
        this.setState({
            error: "Form Incomplete"
        })
    }
    if(this.state.error === "") {
        this.props.history.push("/login");  
    }
}

Проблема в том, что this.props.dispatch является асинхронным вызовом. Он запускается, когда пользователь успешно заполняет поле формы.

Проблема в том, что он может потерпеть неудачу, если имя пользователя уже существует, и он заполнит состояние ошибки. Если это происходит, мое приложение продолжает работать и переходит к this.props.history и перенаправляет пользователя, даже если в форме есть ошибка.

Как мне в основном сказать: «Дождитесь завершения this.props.dispatch, а затем проверьте, нет ли ошибок. Если нет, то перенаправьте»?

Answer 1

Я полагаю, что вы отправляете эти данные в какой-то бэкэнд.Просто добавьте bool в ответ сервера, чтобы ваш интерфейс знал, что делать дальше.

submitForm = (e) => {
e.preventDefault();

const { user } = this.state;
const { dispatch } = this.props;
if (!(  user.password && user.lastName &&user.userName && user.firstName  )) {
    this.props.dispatch(userActions.register(user));
} else {
    this.setState({
        error: "Form Incomplete"
    })
}
if(isValid) {
    this.props.history.push("/login");  
}
}

Answer 2

Вы можете указать submitForm как функцию async следующим образом:

submitForm = async (e) => {

, а затем добавьте ключевое слово await перед this.props.dispatch

await this.props.dispatch(userActions.register(user));

Но так как вы используете redux, а я предполагаю что-то вроде redux-обещания-промежуточного программного обеспечения, то вы должны позволить этому обрабатывать успех / неудачу ваших асинхронных вызовов.

Вы упомянули, что onInit форма непрерывно перенаправляет, потому что нет установленной ошибки. Можем ли мы изменить начальное значение ошибки на false, и если ошибка когда-либо будет true, то перенаправить пользователя? И затем, единственный раз, когда вы установите error на true, это когда из вашего вызова поступит реальная ошибка.