React/Redux useEffect与调度触发多次

Question

我对useEffect()和dispatch()操作有一个问题。我用的是最新版本的react 18.1.0。基本上，我有以下代码定义在一个简单的。

const Item = () => {
const dispatch = useDispatch()
const user = useSelector(state => state.authReducer.user)
useEffect(() => {
dispatch(fetchItems()).then(res => console.log(res)).catch(err => console.log(err))
}, [dispatch])
return (
<div id='data-container'>
<Navbar />
<div id='data-wrap'>
Data
</div>
</div>
);
}
export default Item 

fetchItems()是一个从API获取数据的简单函数。

问题是动作被调度了两次，但是我希望动作只被调度一次。

任何帮助的家伙将不胜感激。

谢谢。

Answer 1

当你在开发模式下运行React时，这是正常的。(这是React检查一切工作正常)。

尝试构建一个生产版本，它应该正常运行。

在依赖数组中使用dispatch也是正确的，因为它永远不会改变它的引用。

Answer 2

如果你将useEffect与一个空数组一起使用，那么你只需要在渲染组件时调用一次。

useEffect(() => {
dispatch(fetchItems()).then(res => console.log(res)).catch(err => console.log(err))
}, [])