1

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

有两个组件：一个 parent Login，它使用一个函数处理对 API 的调用logIn，一个嵌套组件LoginUi，它具有表单和一个函数，它通过以下onSubmit方式调用 parent 方法：logInthis.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 调用返回错误时才必须返回。

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

谢谢！

4

1 回答 1

2

由于您依赖 Promises onSubmit 应该返回一个承诺。添加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' };
    });
}
于 2019-03-16T09:40:00.627 回答