Я работаю над подключением простой страницы входа в систему с помощью redux. Проблема в том, что он переходит в бесконечный рендер l oop. Я использую перехватчики React и просто хотел перенаправить страницу на домашнюю страницу "/" после успешной попытки входа в систему.
useEffect(() => {
if (props.loggedIn === "true") {
localStorage.setItem("userToken", `Bearer ${props.userToken}`);
props.history.push("/");
}
}, [props.loggedIn])
Я поддерживаю состояние loggedIn в redux и подключаю свой компонент через подключение из хранилища redux. После успешной попытки я устанавливаю для статуса loggedIn значение «true». Я проверял несколько раз, нет проблем с получением обновленных данных из redux, но как только элемент управления входит в useEffect, он продолжается вечно, и отображается сообщение об ошибке:
response_devtools_backend. js: 562 Предупреждение: максимум глубина обновления превышена. Это может произойти, когда компонент вызывает setState внутри useEffect, но useEffect либо не имеет массива зависимостей, либо одна из зависимостей изменяется при каждом рендеринге.
Похоже на простую проблему, но я не знаю, что я здесь скучаю. Внутри useEffect нет изменения состояния. Понятия не имею, почему это происходит. Искал ответы, пока не нашел. Любая помощь или указатели в правильном направлении были бы очень полезны. Заранее спасибо.
const mapStateToProps = (state) => {
return {
loggedIn: state.user.loggedIn,
userToken: state.user.userToken
}
}
const mapDispatchToProps = (dispatch) => {
return {
login: (userCredentials) => dispatch(userActions.login(userCredentials)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Login);