javascript - react useEffect钩子(Hook)和Async/await自己的获取数据功能？

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

我创建了一个函数组件来使用 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里面做吗？正确的地点？并且，此调用将仅发生一次？因为我使用 [] ？

通常，您将如何做这样的事情？

最佳答案

总体而言，您正在朝着正确的方向前进。为了获取数据，您需要使用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>;
};

关于javascript - react useEffect钩子(Hook)和Async/await自己的获取数据功能？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55008076/