React/Redux useEffect with dispatch 触发多次

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

如果您将 useEffect 与空数组一起使用，您将只在呈现组件时调用一次。

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

Answer 2

在开发模式下运行 React 是正常的。（React 检查是否一切正常）。

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

此外，在依赖项数组中进行分派也是正确的，因为它永远不会更改其引用。

React/Redux useEffect with dispatch 触发多次

React/Redux useEffect with dispatch fired multiple times

reactjs

react-redux

react-hooks