Asyn c проблема с компонентом React и диспетчерскими действиями - PullRequest
Новая
       34

Asyn c проблема с компонентом React и диспетчерскими действиями

0 голосов
/ 25 февраля 2020

Я создаю приложение React-Redux, использующее API, созданный с express. js.

У меня есть форма входа в систему, и я хочу отобразить сообщение пользователю, когда он / она пытается войти с неправильными учетными данными. Я пытался построить это поведение разными способами. Здесь у меня есть один очень логичный и полностью синхронный способ.

Я установил компонент входа в систему, вызывая функцию из userActions из его реквизита. Компоненты связаны с export default connect(null, { login, register })(Login);.

Давайте посмотрим на вход в систему на данный момент. Я оставлю код для регистрации там, потому что я не знаю, если / как это влияет на мою функциональность входа в систему. Моя проблема в том, что я могу получить созданные уведомления, и вход в систему и проверка происходят, как и ожидалось, но я не могу получить статус "auth", который необходим для определения перенаправления.

I необходимо обработать 2 сценария ios:

  1. успешный вход в систему => перенаправление на '/' с отображением приветствия;
  2. сбой при входе => отобразить сообщение об ошибке на той же странице .

Я могу получить созданные уведомления, и вход в систему и проверка происходят, как и ожидалось, но я не могу получить статус "auth", который необходим для принятия решения о перенаправлении.

Может кто-нибудь помочь мне с этим? Спасибо!

метод onSubmit @ login. js: 

onSubmit = async e => {
    e.preventDefault();

    const { name, email, password } = this.state;

    // Check For Errors
    {....}

    // Register or login and notify user
    let auth = false;
    if (this.state.register) {
      this.props.register({ name, email, password })
        .then((res) => { auth = res.success; console.log(`register then: ${res}`); })
    } else {
      this.props.login({ email: email, password: password })
        .then((res) => { auth = res.success; console.log(`login then: ${res}`); })
    }

    if (auth) { this.props.history.push('/') }
  }

метод login @ userActions. js: 

export const login = authData => async dispatch => {

  axios.post('/api/v1/users/login', authData)
    .then(res => {
      beginSession(res);

      dispatch({
        type: LOGIN,
        payload: res.data.user
      });

      notifyUser('login', dispatch, res);

      return { success: true }
    })
    .catch(err => {
      return { success: false }
    });

};

Ответы [ 2 ]

0 голосов
/ 25 февраля 2020

Мне удалось создать опыт, который я хотел, используя componentDidUpdate для проверки для state.user, который обновляется после входа в систему. 

componentDidUpdate = () => {
    if (Object.keys(this.props.user).length !== 0) { this.props.history.push('/') }
  }

...

const mapStateToProps = state => ({
  user: state.user
})

export default connect(mapStateToProps, { login, register })(Login);
0 голосов
/ 25 февраля 2020

вот компоненты, загружаемые перед ответом на вызов API , который вы проверяете перед репозиторием, получают 



//create a  use state variable for validation return a response  

constructor(props) {
    super(props);
    this.state = {
    login:'' }
   };

// any method here
onSubmit = async e => {
    e.preventDefault();
}
/* api call*/
{
this.setState({
                login: json.error.message
              });
// other code
}

render() {  

    if (!this.state.user ) {
      return null;
    }


    return (
      <>
//componest wait still not get repose 

<p>{this.state.login} <p>
<>
}

....
...