React useEffect hook和Async / await自帶的fetch數據函數？

Question

我試圖創建一個從服務器獲取數據的功能，它的工作原理。 但我不確定這是否正確？

我使用useState ， useEffect和Async / Await創建了一個獲取數據的函數組件：

 import React, { useState, useEffect } from "react"; const Fetch = () => { const [data, setData] = useState(null); useEffect(() => { const fetchData = async () => { let res = await fetch( "https://api.coindesk.com/v1/bpi/currentprice.json" //example and simple data ); let response = await res.json(); setData(response.disclaimer); // parse json console.log(response); }; fetchData(); }, []); return <div>{data}</div>; }; export default Fetch; // don't run code snippet, not working, this component must be imported in main 

在哪里我不知道是一個地方 調用 fetchData功能。 我在useEffect里面做那個？ 正確的位置？ 而且，此次通話只會發生一次？ 因為我用[] ？

一般來說，你會怎么做這樣的事情？

Answer 1

總的來說，你正朝着正確的方向前進。 對於獲取數據，您需要使用useEffect並將[]作為第二個參數傳遞，以確保它僅在初始安裝時觸發。

我相信你可以從解耦fetchJson函數中獲益並使其更通用，如下所示：

const fetchJson = async (url) => {
  const response = await fetch(url);
  return response.json();
};

const Fetch = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchJson("https://api.coindesk.com/v1/bpi/currentprice.json")
      .then(({ disclaimer }) => setState(disclaimer));
  }, []);

  return <div>{data}</div>;
};

Answer 2

另一種選擇是使用自調用函數：

const Fetch = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    (async () => {
      let res = await fetch(
        "https://api.coindesk.com/v1/bpi/currentprice.json" //example and simple data
      );
      let response = await res.json();
      setData(response);
    })();
  }, []);
  return <div>{data}</div>;
};

將獲取邏輯分離到單獨函數的建議是個好主意，可以按如下方式完成：

const Fetch = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    (async () => {
      let response= await fetchData("https://api.coindesk.com/v1/bpi/currentprice.json");
      setData(response);
    })();
  }, []);
  return <div>{data}</div>;
};

const fetchData = async (url) => {
  const response = await fetch(url);
  const json = await response.json();

  return json;
};

另一種選擇是圍繞useEffect創建一個包裝函數，為你觸發異步函數，類似於：

export function useAsyncEffect(effect: () => Promise<any>) {
  useEffect(() => {
    effect().catch(e => console.warn("useAsyncEffect error", e));
  });
}