Question

我创建了简单的登录表单，并且工作正常。我想在API调用失败（登录失败）时返回错误消息。

视图的Login.js文件

async  handleSubmit(event) {
    let userLoginObject = {
      login: this.state.username,
      password: this.state.password,
    }
    if (!isEmptyOrNull(this.state.username) &&
      !isEmptyOrNull(this.state.password)) {
      let resp = await this.props.onUserLogin(userLoginObject)
      console.log("resp",resp) // this shows 'undefined'
      this.setState({ formError: resp }); //Im trying to set state to the formError
    }
}

动作文件

export const onUserLogin = (userLoginData) => async (dispatch) => {
  const loginResponse = await doUserLogin(userLoginData)
  dispatch({
    type: ACTION_LOGIN,
    data: loginResponse,
  })
  if (loginResponse.token) {
      history.push('/investments')
  }
  else {
    console.log("error",loginResponse.error) // this shows the error message
    return loginResponse
  }
}

登录失败后，我的控制台就是这样

resp undefined
token:1 POST http://localhost:8000/token 400 (Bad Request)
authActions.js:52 error invalid credentials

即使我在操作内仅返回一个字符串，它也会显示undefined。

这是怎么了？ API调用失败时如何返回错误消息。

Answer 1

我认为您的问题是您正在使用async/await，但是只能处理doUserLogin成功的情况。请记住，async/await基本上只是诺言。

尝试一下：

const loginResponse;
try {
  loginResponse = await doUserLogin(userLoginData)

  dispatch({
    type: ACTION_LOGIN,
    data: loginResponse,
  })

  if (loginResponse.token) {
    history.push('/investments')
  }
} catch (e) {
  console.log("error", e) // this shows the error message

  return e
}

Answer 2

使用回调函数而不是返回错误（也许不可能从redux操作返回任何内容）

// Login.js
async  handleSubmit(event) {
    let userLoginObject = {
      login: this.state.username,
      password: this.state.password,
    }
    if (!isEmptyOrNull(this.state.username) && !isEmptyOrNull(this.state.password)) 
    {
      let resp = await 
      this.props.onUserLogin(userLoginObject, error => {
         // Called when error is occurred
         this.setState({ formError: error }); 
      })
      console.log("resp",resp) 
      // this shows 'undefined'
      this.setState({ formError: resp }); //Im trying to set state to the formError
    }
}



// Action file
export const onUserLogin = (userLoginData, onError /** error callback */) => async (dispatch) => 
{
   const loginResponse = await doUserLogin(userLoginData)
   dispatch({
      type: ACTION_LOGIN,
      data: loginResponse,
  })
  if (loginResponse.token) {
      history.push('/investments')
  }
  else {
   console.log("err",loginResponse.error) // this shows the error message
    onError(loginResponse); // call callback function and send error with it
    return loginResponse
  }
}

使用回调功能

this.props.onUserLogin(userLoginObject, error => {
   // Called when error is occurred
   this.setState({ formError: error });
});

Answer 3

由于您已经在使用redux，所以我建议您采用其他方法，如果在您的分派操作中实际上将错误消息另存为prop（如果是这种情况），然后将其显示在组件中。而不是使用

this.setState（{formError：resp}）;

您可以直接从redux恢复错误

this.props.errorLogin

redux操作将未定义返回到视图

3 个答案: