useEffect() 导致重新渲染和对 api 的多个请求

Posted 2023-03-16

【中文标题】useEffect() 导致重新渲染和对 api 的多个请求

【英文标题】：useEffect() cause re-renders and multiple requests to api

【发布时间】：2021-05-03 09:12:49

【问题描述】：

问题

功能组件导致多次重新渲染导致多次 ajax 请求。解决办法是什么？

这是我的代码。

export default function MyMenu() 
    let menu = useStoreState(state => state.menu.menu);
    const getMenu = useStoreActions(actions => actions.menu.getMenu);
    let categoryId = useStoreState(state => state);
    const setCategoryId = useStoreActions(actions => actions.menu.setCategoryId);
    const [localCategoryId, setLocalCategoryId] = React.useState(0);
    React.useEffect(() => 
        getMenu();
    );
    // below is usual return method

【参考方案1】：

您应该将一组依赖项作为第二个参数传递给useEffect。如果您希望它只运行一次 - 传递一个空数组，如下所示：

 React.useEffect(() => 
    getMenu();
, []);

【讨论】：

谢谢。还有一件事。我想在每次状态变化时运行它。

所以在数组中插入你的依赖，例如，如果你想在每次menu更改时调用它 - [menu]

【参考方案2】：

缺少第二个参数[]，看一下：

React.useEffect(() => 
    getMenu();
, []);

【讨论】：

还是不行。问题是，组件会多次重新渲染。