React useEffect 在获取数据时进入无限循环

Question

我正在尝试使用 useEffect 挂钩在我的组件内获取一些数据，并且它会进入无限循环。我正在使用这个反应教程页面和这个竞争条件页面作为参考。这是我的代码。

function AppNew () {
  const [matchData, setMatchData] = useState(null)
  const [matchesLoaded, setMatchesLoaded] = useState(false)

  useEffect(() => {
    let active = true;
    
    const responseMatches = axiosInstance.get("api/matches/")
        .then(responseMatches => {
            if (active) {
                setMatchData(responseMatches.data);
                setMatchesLoaded(true);
            }
        })
        .catch (error => {
            throw error;
        })

    return () => {
        active = false
    }
  });
  
  console.log("match data: ");
  console.log(matchData);

} 

API在10ms左右返回有效数据。 matchData 的 console.log 语句不断将数据写入控制台。

Answer 1

useEffect(() => {    
const responseMatches = axiosInstance.get("api/matches/")
    .then(responseMatches => {
        if (active) {
            setMatchData(responseMatches.data);
            setMatchesLoaded(true);
        }
    })
    .catch (error => {
        throw error;
    })
},[]);

useEffect 的第二个参数缺少依赖数组