React useEffect调用API的次数太多，如何在组件呈现时将API调用限制为仅一次？

Question

我在useEffect钩子中调用一个GetAPI，以在组件装载之前获取数据，但是它多次调用API，并且我得到一个错误“多次API调用”。

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(() => {
    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一次。