在useEffect钩子中使用异步函数双重调用API

Question

当我查看控制台时，我的 API 在重新加载页面后被调用两次
（前两个和后两个是不同的API调用）

我将 dataFetched 初始值设置为 false。

API 被调用两次的原因是什么？

我只想调用一次。

这是代码片段。

React.useEffect(() => {
        async function fetchData() {
            const response = await fetch(
                "https://opentdb.com/api.phpamount=5&category=31&difficulty=easy&type=multiple"
            );
            const jsonData = await response.json();
            setData(jsonData.results);
        }

        if (!dataFetched) {
            fetchData();
            setDataFetched(true);
        }
    }, [dataFetched]);

Answer 1

由于 useEffect 函数是根据您对状态变量 dataFetched 所做的更改来触发的，因此当您将其从 false->true 更改时，它会第二次被触发。我已经修改了您的代码，如下所示取出状态变量 dataFetched 的侦听器，这样它就不会第二次被触发。

React.useEffect(()=>{
   async function fetchData(){
      const response = await fetch('https://opentdb.com/api.phpamount=5&category=31&difficulty=easy&type=multiple')
      const jsonData = await response.json() 
      setData(jsonData.results)
   }

   if (!dataFetched) {
      fetchData();
      setDataFetched(true);
   } 
})