useSelector与useDispatch导致无限循环

Question

所以我在具有空依赖项(componentdidmount(的useEffect内部调用useDispatch并更新redux存储中的状态，我也试图使用useSelector访问同一组件中的同一状态，但它会导致无限循环，知道为什么吗？感谢

我的代码与此类似：

export const PostsByTerm = () => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchPostsByTerm(payload));  
}, [])
const posts = useSelector((state) => state.postsByTerm);
return (
<div>
<h1 className="post_heading">Posts</h1>
{posts ? posts.map((post) => <h1>{post.entityLable}</h1>) : <h1>no posts</h1>}
</div>
);
};

Answer 1

1. 之所以会发生这种情况，是因为您正在使用Redux状态的一部分(即使用useSelector从Redux存储中提取的posts(，当状态发生变化时，您的组件将自动重新渲染。

2. 但是，每次装载组件时，也会调用useEffect中的dispatch方法，该方法会更改Redux存储并导致组件重新渲染。

3. 同样，在重新渲染期间，您的useEffect运行dispatch函数，该函数会导致Redux存储更新，进而导致另一次重新渲染，这就是您陷入重新渲染和Redux存储升级的无限循环的原因

4. 对此的解决方案可能是仅在payload更改时运行dispatch，而在payload更改时仅运行useEffect，而不是在组件安装时运行

5. 您可以使用以下代码进行相同操作：

useUpdateEffect-只有当依赖项更改时才会运行的自定义反应挂钩

import { useEffect, useRef } from "react"
export default function useUpdateEffect(callback, dependencies) {
const firstRenderRef = useRef(true)
// Since ref persists value between renders (and itself doesn't trigger a render when value is changed), we can simply just set ref to a failing condition on our 1st render so that component only is re-rendered when dependencies change and not also "onMount"
useEffect(() => {
if (firstRenderRef.current) {
firstRenderRef.current = false
return
}
return callback()
}, dependencies)
}

在我们的代码中使用useUpdateEffect钩子：

const dispatch = useDispatch();
useUpdateEffect(() => {
dispatch(fetchPostsByTerm(payload));  
}, [payload])
const posts = useSelector((state) => state.postsByTerm);
return (
<div>
<h1 className="post_heading">Posts</h1>
{posts ? posts.map((post) => <h1>{post.entityLable}</h1>) : <h1>no posts</h1>}
</div>
);
};

Answer 2

只需在依赖数组中像这样写dispatch]