無限循環 useEffect() 鈎子

Question

所以，我正在使用鈎子 useState()：

const [dailyData, setDailyData] = useState({});

並使用 useEffect() 鈎子從 API 中獲取數據：

 useEffect(() => {
    const fetchAPI = async () => {
        setDailyData(await fetchDailyData())
    }

    console.log(dailyData)

    fetchAPI();
});

但問題是這些請求是無止境的。

我是 React 的新手，所以如果你能解釋一下為什么會這樣，那就太好了。

Answer 1

當任何 state 數據更新時，將觸發您的useEffect 。

因此，如果您在useEffect中更新dailyData ，則 state 更改將再次觸發useEffect 。

您可以將依賴數組添加到 useEffect 或任何標志變量以進行適當的操作。

例如，添加一個空的依賴數組將像componentDidMount一樣工作。

useEffect(() => {
    // Do something here
}, []);

Answer 2

您的 useEffect 需要一個數組依賴關系。

useEffect(() => {
 const fetchAPI = async () => {
    setDailyData(await fetchDailyData())
 }

 console.log(dailyData)

 fetchAPI();
}, []);

Answer 3

要使 useEffect 只運行一次，您必須在 useEffect function 中提供一個空數組

useEffect(() => {
    const fetchAPI = async () => {
        setDailyData(await fetchDailyData())
    }

    console.log(dailyData)

    fetchAPI();
},[]);

如果您想在發生某些更改時運行 useEffect，您可以在數組中指定值，並且每當變量發生任何更改時，useEffect 都會再次運行。

Answer 4

每次更改組件中變量的 state 時，useEffect() 掛鈎都會運行。 所以為了避免無限循環，你需要在 useEffect() 鈎子中嵌套依賴數組。

您的代碼可以修改為

 const [dailyData, setDailyData] = useState({});

     useEffect(() => {
     const fetchAPI = async () => {
        setDailyData(await fetchDailyData())
      }

        console.log(dailyData)

     fetchAPI();
   },  [ //dependency array]);
 

可以定義依賴數組，因為它是 useEffect function 中的第二個可選參數。 顧名思義，它是一個依賴數組，當從先前的渲染更改時，將調用第一個參數中定義的效果 function。