#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 ограничивает количество вложенных обновлений, чтобы предотвратить бесконечные циклы. «`