react redux 在使用 useEffect 和 dispatch 时导致无限循环

Question

我删除了最初的问题，因为我对它的解释不是很好，导致不必要的讨论和注意力不集中。

我正在尝试使用 React 和 Redux 构建应用程序，但在使用 useEffect 和 dispatch 时陷入了无限循环。

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

Answer 1

你不应该这样写 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。使用 render 而不是 component。另请参阅 react-router 文档。

您的代码做了两件事：

• 在每次选择器调用时 returns 一个新对象，这将使您的组件重新呈现 总是，即使没有状态变化
• 它 returns 完整状态，因此即使您只是返回 state 没有传播，它也会在任何状态更改时重新呈现。