Вызов функции после завершения выполнения асинхронной функции в React

Question

Я довольно новичок в React и пытаюсь учиться, делая небольшие простые приложения. Я делаю простое React приложение, которое имеет Login функциональность. Я также использую Redux store и Redux-saga. Мой поток входа в систему:

1. Существует компонент Login, который принимает от пользователя email и password, и при нажатии кнопки входа в систему выполняется POST вызов.
2. email и password отправляются на сервер, если они действительны, сервер возвращает токен в ответе, который я сохраняю в local storage.
3. Если токен получен, действиедля Login success уволен. Здесь я устанавливаю флаг с именем success: true.
4. . На своем внешнем интерфейсе я проверяю значение флага success, а если success==true, то я перенаправляю на другую страницу с именем Customers

Answer 1

Вы не можете сразу проверить this.props.success, поскольку вы делаете асинхронный вызов, вам нужно добавить проверку для success реквизитов в getDerivedStateFromProps

add getDerivedStateFromProps в вашем компоненте Login

static getDerivedStateFromProps(nextProps, prevState) {
   if(!nextProps.loading){
     if(nextProps.success === true) {
       nextProps.history.push('/customers');
     } else {
       return { error: 'Invalid Username/Password' }
     }
   }
   return null
}

удалить приведенный ниже код из handleSubmit

if (this.props.success)
            this.props.history.push('/customers');
else
 return this.setState({
    error: 'Invalid Username/Password'
 });