Перенаправление после входа в систему не работает должным образом

#reactjs

#reactjs

Вопрос:

Пожалуйста, я пытаюсь перенаправить пользователя после входа в систему, и, похоже, я делаю что-то не так, потому что после входа в систему он не перенаправляет на следующую страницу, пока я не обновлю страницу вручную

Вот компонент входа в систему:

 class Signin extends Component {
  state = {
    email: "",
    password: "",
  };
  
  componentDidUpdate(){
    console.log(this.props.isAuthenticated)
  if(this.props.isAuthenticated) return <Redirect to= '/'/>
  }

  user = JSON.parse(localStorage.getItem("user"));
  onChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value,
    });
  };
  onSubmit = (e) => {
    e.preventDefault();
    this.props.login(this.state);
  };
  render() {
if(this.user) return <Redirect  to ='/'/>
    return (
      <Grid textAlign="center" verticalAlign="middle" className="app">
        <Grid.Column style={{ maxWidth: 600 }}>
          <Header as="h2" icon textAlign="center">
            <Icon name="code branch" className="headerColor" />
            <div className="headerColor">Login to ProGela</div>
          </Header>
          <Form size="large" onSubmit={this.onSubmit} className="form">
            <Segment stacked>
              <Form.Input
                fluid
                id="email"
                icon="user"
                iconPosition="left"
                placeholder="Email"
                onChange={this.onChange}
                required
                type="email"
              />
              <Form.Input
                fluid
                id="password"
                icon="lock"
                iconPosition="left"
                placeholder="Password"
                onChange={this.onChange}
                required
                type="password"
              />
              <Button color="red" className="headerColor" fluid size="large">
                Sumit
              </Button>
            </Segment>
          </Form>
        </Grid.Column>
      </Grid>
    );
  }
}

const mapStateToProps = (state) => {
  return{
    isAuthenticated: state.auth.isAuthenticated
  }
}

export default connect(mapStateToProps, { login })(Signin);
  

я перепробовал так много вещей, например, я проверил пользователя, присутствует ли он в localstorage, затем позволил ему перенаправить, проверить, аутентифицирован ли пользователь из реквизитов, использовал это с помощью componentDidUpdate, но прогресса по-прежнему нет

Комментарии:

1. предположительно, ваша login функция устанавливает пользовательский элемент в локальном хранилище? выполняет ли он какие-либо обновления состояния в этой функции? если вы не обновите состояние и не передадите новые реквизиты, компонент не будет обновлен, а функция визуализации не будет вызвана и if(this.user) return <Redirect to ='/'/> не будет возвращена

2. @TomFinney Спасибо за ваш комментарий, это помогло. Но после использования isAuthenicated из хранилища у меня появляется эта ошибка `Превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate . React ограничивает количество вложенных обновлений, чтобы предотвратить бесконечные циклы. «`