React useEffect 钩子和 Async/await 自己的获取数据函数？

Question

我尝试创建一个从服务器获取数据的函数，它可以工作。但我不确定这是否正确？

我使用 useState、useEffect 和 Async/Await[ 创建了一个函数组件来获取数据=33=] :

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 }) => setData(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));
  });
}

React useEffect 钩子和 Async/await 自己的获取数据函数？

React useEffect hook and Async/await own fetch data func?

javascript

asynchronous

async-await

reactjs

react-hooks