React useEffect 调用 API 的次数过多，如何在组件渲染时将 API 调用限制为仅一次？

Question

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

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 获取数据的最佳方式。

Answer 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 一次。