Обещание вернуться с уловом с помощью Axios и final-form

Question

Я вхожу в сервис API от клиента React с Axios. Форма для имени и пароля обрабатывается final-form. Все работает как положено, кроме случаев, когда я хочу вернуть ошибку из функции onSubmit.

Существует два компонента: родительский Login, который обрабатывает вызов API с помощью функции logIn, и вложенный компонент LoginUi, который имеет форму и функцию onSubmit, которая вызывает родительский метод logIn через this.props.logIn():

Здесь метод logIn в родительском Login компоненте:

class Login extends Component {
    constructor() {
        super();
        this.logIn = this.logIn.bind(this);
    }

    logIn(credentials) {
        return axios({
            method: 'post',
            url: 'http://0.0.0.0:3000/v1/login/',
            data: {
                name: credentials.name,
                password: credentials.password,
            },
        })
            .then((response) => {
                return response;
            })
            .catch((error) => {
                return error;
            });
    }

    render() {
        return <LoginUi logIn={this.logIn} {...this.props} />;
    }
}

export default Login;

А вот метод onSubmit в дочернем LoginUi компоненте:

class LoginUi extends Component {
    constructor(props) {
        super(props);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit(credentials) {
        this.props
            .logIn(credentials)
            .then((result) => {
                console.log(result);
            })
            .catch((error) => {
                console.log(error);

                return { [FORM_ERROR]: 'Login Failed' };
            });
    }

    render() {
        return (
            <div className="LoginUi">
                {/* here goes the form with final-form, not included for brevity */}
            </div>
        );
    }
}

export default LoginUi;

{ [FORM_ERROR]: 'Login Failed' } отвечает за изменение состояния формы - обрабатывается final-form -, но не делает этого. Если я верну его за пределы catch, это сработает:

onSubmit(credentials) {
    this.props
        .logIn(credentials)
        .then((result) => {
            console.log(result);
        })
        .catch((error) => {
            console.log(error);
        });
    return { [FORM_ERROR]: 'Login Failed' };
}

Но, очевидно, это не то, что я хочу, потому что [FORM_ERROR]: 'Login Failed' должен возвращаться только тогда, когда вызов API возвращает ошибку.

Я почти уверен, что здесь проблема с использованием обещаний. Если у кого-то есть идеи, я был бы признателен!

Спасибо!

Answer 1

Поскольку вы полагаетесь на Promises, onSubmit должен вернуть обещание. Добавьте return к onSubmit, в противном случае он возвращает неопределенное значение, и final-form не может знать, что вызов axios завершен:

onSubmit(credentials) {
  return this.props
    .logIn(credentials)
    .then((result) => {
      console.log(result);
    })
    .catch((error) => {
      console.log(error);    
      return { [FORM_ERROR]: 'Login Failed' };
    });
}