Question

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

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

我正在Redux中保持登录状态，并通过Redux存储区中的connect连接我的组件。成功尝试后，我将登录状态设置为“ true”。我检查了多次，从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重新创建（卸载并重新安装）该组件，并导致一次又一次的useEffect调用。检查您应用的当前位置。

类似props.loggedIn === "true" && props.locatinon.path !== '/'然后是您的效果代码

为什么我的React组件会陷入无限循环？

1 个答案: