承诺从与 Axios 和最终形式捕获回来

Question

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

有两个组件：父Login，它使用logIn函数处理对 API 的调用，以及嵌套组件LoginUi，它具有表单和onSubmit函数，通过this.props.logIn()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'才必须返回。

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

谢谢！

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' };
});
}