javascript - React Formik 没有正确处理错误

Question

我正在使用基本的 Formik 模板来处理登录表单。

onSubmit={(
                    values,
                    { setSubmitting, setErrors /* setValues and other goodies */ }
                  ) => {
                      props.logMeIn(values);
                    // LoginToSystem(values).then( 
                    //   user => {
                    //     setSubmitting(false); 

                    //     // do whatevs...
                    //     // props.updateUser(user)
                    //   },
                    //   errors => {
                    //     setSubmitting(false);
                    //     // Maybe transform your API's errors into the same shape as Formik's
                    //     //setErrors(transformMyApiErrors(errors));
                    //     console.log(errors);
                    //   }
                    // );
                }}

这个问题在onSubmit 部分；演示代码被注释掉了，但它使用了一个似乎是 promise 的 LoginToSystem 函数。我无法弄清楚这个功能对我来说是什么。我处理此问题的函数是 props.logMeIn() - 它也无法按预期工作

如果登录成功，目前会正常运行，一切正常。但是，如果登录失败(404、401 等)，表单将保留在那里，并且 setSubmitting 日志将保留在那里，因此 Submit 变灰但什么也没做。

如果我尝试用我的函数替换 LoginToSystem，我会在 .then 上收到一个错误，我无法执行 .then在 undefined 上。

我想知道这是否是因为我的函数没有像 Promise 那样设置？

  loginClickHandler = (user) => {
    let userObj = {
      email: user.email,
      password: user.password
    }
    axios.post('api/v1/auth/sign_in', userObj)
        .then((res) => {
          console.log(res.headers);
          let loggedInUser = {
           'access_token': res.headers['access-token'],
           'client': res.headers['client'],
           'uid':res.headers['uid'],
           'signedIn': true
          };
          this.setState({
            user: loggedInUser
          })     
          this.props.retrieve(user.email);
        })
        .catch((err) => {
            console.log(err);
            return err
        })

  };

我的函数确实在 .then/.catch 上正确捕获(感谢 axios)，但也许我应该修改它们以提供回调以便 onSubmit 可以正确触发？

Answer 1

在一些指导下，我能够更简单地解决这个问题。 Axios native 返回一个“ promise ”，所以我只需要确保函数的结果最终是 axios 的方法。

 loginClickHandler = (user) => {
        let userObj = {
            email: user.email,
            password: user.password
        }
        const request = axios.post('api/v1/auth/sign_in', userObj);

        request.then((res) => {
            console.log(res.headers);
            let loggedInUser = {
                'access_token': res.headers['access-token'],
                'client': res.headers['client'],
                'uid': res.headers['uid'],
                'signedIn': true
            };
            this.setState({user: loggedInUser, auth: true, anchorEl: null})
        }).catch((err) => {
            console.log(err);
            // setErrors({ test: 'This was an error' })
        })
        return request;
    };