承诺从Axios和最终形式回归

Question

我从一个带有Axios的React客户端登录api服务。名称和密码的表单由final-form处理。一切都按预期工作，除非我想从onSubmit函数返回错误。

有两个组件：父Login，它使用logIn函数处理对API的调用，以及嵌套组件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' };
}

但显然这不是我想要的，因为只有在API调用返回错误时才必须返回[FORM_ERROR]: 'Login Failed'。

我很确定这里使用promises是个问题。如果有人有任何想法，我将不胜感激！

谢谢！

Answer 1

因为你依赖Promise onSubmit应该返回一个promise。将return添加到onSubmit，否则返回undefined，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' };
    });
}