為什么在使用 React hooks 獲取 api 時我會得到一個空數組？

Question

我是反應鈎子的新手，我正在嘗試從 API 獲取信息，但是當我發出請求時，我首先得到 2 個響應，一個空數組，然后是 API 的數據，為什么我得到那個空數組！ ，這是我的第一個問題，對不起。 謝謝你幫助我！

import {useState, useEffect} from 'react';

const getSlides = (API) => {

    const[data,setData] = useState([]);

    const getData = () =>
    fetch(`${API}`)
        .then((res) => res.json())
    
    useEffect(() => {
        getData().then((data) => setData(data))
    },[])




    return data
}

export default getSlides;

Answer 1

useEffect()鈎子在第一次渲染之后運行。 由於您已使用空數組初始化數據狀態，因此第一次渲染返回一個空數組。

如果您的組件依賴於要呈現的數據，您始終可以有條件地return null ，直到您的數據被加載。

另外，我建議對 api 請求使用異步函數，它允許您使用await關鍵字，這使您的代碼更易於閱讀。 唯一需要注意的是，您不能將異步函數傳遞給useEffect ，而是在您的鈎子中定義一個異步函數，然后調用它。

import React, { useState, useEffect } from "react";

const API = "https://example.com/data";

const GetSlides = (props) => {
  const [data, setData] = useState();

  useEffect(() => {
    async function getData() {
      const request = fetch(API);
      const response = await request;
      const parsed = await response.json();
      setData(parsed);
    }

    getData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (data === undefined) {
    return null;
  }

  return <>data</>;
};

export default GetSlides;

當然，如果你願意，你仍然可以使用 Promise 鏈。

  useEffect(() => {
    async function getData() {
      await fetch(API)
        .then((res) => res.json())
        .then((data) => setData(data));
    }
    getData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

Answer 2

<GetSlides api="https://yay.com" />

反應組件需要標題大小寫

import React, { useState, useEffect } from 'react'

const GetSlides = ({ api }) => {
  const [data, setData] = useState(null)

  const getData = async () =>
    await fetch(`${api}`)
      .then((res) => res.json())
      .then((data) => setData(data))

  useEffect(() => {
    getData()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  console.log(data)

  return <div>slides</div>
}

export default GetSlides

Answer 3

在你的組件渲染之后調用效果回調函數。 （就像componentDidMount一樣）所以在第一個渲染階段， data狀態還沒有設置。

Answer 4

您在此處使用空數組初始化數據：

const[data,setData] = useState([] <- empty array);

useEffect 在你的組件掛載后運行，然后調用 API，它可能需要幾秒鍾或幾分鍾來檢索數據，但你會在知道 API 是否完成調用之前立即返回數據。

如果要在從 API 檢索數據后返回數據，則應聲明 async 方法

const getSlides = async (API) => {
 try {
  const res = await fetch(API);
  const data = await res.json();

   return data;
  } catch (e) {
    throw new Error(e);
  }
}

請注意，此功能不需要掛鈎