react redux 在使用 useeffect 和 dispatch

Question

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

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

我构建了一个代码沙盒来重现该问题。这是我的工作。 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。使用 component 代替 render。另请参阅 react-router 文档。

你的代码做了两件事：

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