React useEffect 调用 API 的时间太多，当我的组件渲染时，如何将 API 调用限制为一次？

Posted 2023-02-22

【中文标题】React useEffect 调用 API 的时间太多，当我的组件渲染时，如何将 API 调用限制为一次？

【英文标题】：React useEffect calls API too many time, How can I limit the API call to only once when my component renders?

【发布时间】：2021-07-12 06:57:02

【问题描述】：

我在 useEffect 挂钩中调用 get API，以在组件挂载之前获取数据， 但它多次调用 API，我收到错误“To many API calls”。

const [total, setTotal] = useState(0);
const [message, setMessage] = useState('');

useEffect(() => 
    covidApi.getData(url:'/totals')
    .then((response) => 
        setTotal(response.data[0]);
        setMessage('');
        console.log(response.data);
    )
    .catch((error) => 
        setMessage("No data found");
        console.log(error);
    )
);

输出：

请告诉我，在使用 useEffect 钩子渲染组件之前，这是从 API 获取数据的最佳方式。

【问题讨论】：

把 empty array 作为效果的依赖：useEffect(() => ... , [])。现在这个效果只会在组件挂载时运行一次。

依赖数组未定义，[] :(如果依赖变化太频繁，你可能想看看debouncing或throttling机制

非常感谢@AjeetShah，它成功了。如果你有的话，你能分享一些关于它的文章（如何使用 useEffect 作为不同的生命周期方法）

重复 - ***.com/questions/59606096/…

看这篇解释useEffect所有用例的文章dmitripavlutin.com/react-useeffect-explanation

【参考方案1】：

在useEffect 中的函数后面加上[]，如下所示：

useEffect(() => 
    covidApi.getData(url:'/totals')
    .then((response) => 
        setTotal(response.data[0]);
        setMessage('');
        console.log(response.data);
    )
    .catch((error) => 
        setMessage("No data found");
        console.log(error);
    )
, []);

这只会调用 API 一次。