我正在從 api 獲取一些數據，當我在控制台上記錄獲取的數據時，它會一次又一次地被記錄下來

Question

這是從 api 獲取數據的 function：

 import axios from "axios"; const url = "https://covid19.mathdro.id/api"; export const fetchData = async () => { try { const { data: { confirmed, recovered, deaths, lastUpdate }, } = await axios.get(url); return { confirmed, recovered, deaths, lastUpdate }; } catch (error) {} };

我在 App.js 中使用這個 function 並通過道具將響應傳遞給卡片組件，這是代碼：

 import { fetchData } from "./api"; function App() { const [data, setData] = useState({}); useEffect(() => { async function getData() { const response = await fetchData(); setData({ data: response }); } getData(); }); return ( <div className={styles.container}> <Cards data={data} />

最后，我使用此代碼在控制台上記錄收到的道具，但它在控制台上一次又一次地記錄：

 const Cards = (props) => { console.log(props);

這是控制台的屏幕截圖供您參考：屏幕截圖

Answer 1

每次組件重新渲染時都會執行 useEffect。 將一個空數組作為參數傳遞給 useEffect 以防止這種情況發生。

useEffect(() => {
  async function getData() {
      const response = await fetchData();
      setData({ data: response });
    }
    getData();
}, []);

Answer 2

您必須在useEffect中傳遞一個空的依賴項列表（僅在掛載時運行一次）：

useEffect(() => {
    async function getData() {
        const response = await fetchData();
        setData({ data: response });
    }
    getData();
}, []);

否則它將在每次渲染時運行