为什么我的React组件进入无限循环

Question

我正在用redux连接一个简单的登录页面。问题是它进入了无限渲染循环。我正在使用React挂钩，只是想将页面重定向到主页"/"成功登录后。

useEffect(() => {
if (props.loggedIn === "true") {
localStorage.setItem("userToken", `Bearer ${props.userToken}`);
props.history.push("/");
}
}, [props.loggedIn])

我在redux中保持loggedIn状态，并通过redux存储中的连接来连接我的组件。在成功尝试之后，我将loggedIn状态设置为"；真"；。我检查了多次，从redux获取更新的数据没有问题，但一旦控件进入useEffect，它就会永远持续下去，错误显示：

react_devtools_backend.js:562警告：超过了最大更新深度。当组件在useEffect内部调用setState时，可能会发生这种情况，但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);

Answer 1

也许props.history.push重新创建(卸载并再次装载(组件，它会导致一次又一次地使用Effect调用。检查应用程序的当前位置。

像这样的props.loggedIn === "true" && props.locatinon.path !== '/'，然后你的效果码