时间戳

首页 > 解决方案 > 使用useeffect和dispatch时react redux导致无限循环

reactjs - 使用useeffect和dispatch时react redux导致无限循环

问题描述

我删除了我最初的问题，因为我没有很好地解释它，导致不必要的讨论和失去焦点。

我正在尝试使用 react 和 redux 构建一个应用程序，并且在使用 useEffect 和 dispatch 时陷入了无限循环。

我构建了一个代码框来重现该问题。这是我的工作。 https://codesandbox.io/s/suspicious-morning-ew161 这个问题似乎与 App.js 中的第 8 行有关，但我无法解释原因和方式。

标签： reactjsreduxinfinite-loopuse-effectdispatch

解决方案

你不应该这样写useSelector电话。见https://react-redux.js.org/api/hooks#equality-comparisons-and-updates

代替

const { auth } = useSelector((state) => ({ ...state }));

写

const auth = useSelector((state) => state.auth);

你的另一个问题是

              component={(props) => (
                <TestProfilePage {...props} key={props.match.params.user_id} />
              )}

这将在每次重新渲染时创建一个新组件，React 将卸载整个组件树并创建一个新组件，有效地重新运行您的useEffect. 而不是component，使用render. 另请参阅有关的 react-router 文档。

您的代码做了两件事：

  • 它在每次选择器调用时返回一个新对象，这将使您的组件始终重新渲染，即使没有状态更改
  • 它会返回完整状态，因此即使您只是在state没有展开的情况下返回，它也会在任何状态更改时重新呈现。

推荐阅读