действие приставки возвращает неопределенное представление

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

Использовать функцию обратного вызова вместо возврата ошибки (возможно, невозможно что-либо вернуть из действий с избыточностью)

// 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 2

Поскольку вы уже используете redux, я бы порекомендовал другой подход: что, если в вашем диспетчерском действии вы фактически сохраните сообщение об ошибке в виде подпорки (если это так), а затем отобразите его в своем компоненте.вместо использования

this.setState ({formError: resp});

вы можете восстановить ошибку из RedEx напрямую

this.props.errorLogin

Answer 3

Я думаю, что ваша проблема в том, что вы используете 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
}