React 等待获取数据作为自定义钩子的一部分

Question

在我的 React 功能组件中，我有以下代码；

const user = useFetch('api/userinfo', {});

本质上，这是一个自定义钩子调用，在内部它有一个对 API 的 fetch 调用并设置数据（下面是 usefetch 中的相关代码）；

const [data, setData] = useState(initialData);
//....fetch call
setData(json); // once data is fetched

在我的主要组件中，由于我的网格依赖于这些数据，我如何让代码等待继续到 Grid jsx 直到获取数据？我打算使用 async..await。但不确定是否可以在这里使用自定义钩子来做到这一点？

---

使用下面的代码，似乎由于某种原因，钩子被多次调用；

export default function useFetch(initialUrl, initialData) {
  const [url] = useState(initialUrl);
  const [loadingData, setLoadingData] = useState(true);
  const [data, setData] = useState(initialData);
  useEffect(() => {
    setLoadingData(true);
    fetch(url)
      .then(response => {
        if (response.status === 200) {
          response.json().then(json => {
            setData(json);
            setLoadingData(false);
          });
      })
  }, [url]);

  return [loadingData, data];
}

Answer 1

几个选项供您选择：

1. 使用另一个状态变量（即一些布尔值）并使用它来跟踪数据是否从 API 返回。然后有条件地渲染一些“加载”元素

2. 检查数据是否存在并根据其存在有条件地呈现。

Answer 2

以下是使用自定义挂钩的方法：

// defining useFetch hook
const useFetch = (url) => {
  // state to keep track of loading
  const [loadingData, setLoadingData] = useState(false);

  // state for data itself
  const [data, setData] = useState(null);

  // effect to fetch data
  useEffect(() => {
    const fetchData = async () => {
      try {
        // set data to loading
        setLoadingData(true);

        // request to load data, you can use fetch API too
        const { data } = await axios.get(url);

        // set data in state and loading to false
        setLoadingData(false);
        setData(data);
      } catch (error) {
        console.log("error", error);
      }
    };

    fetchData();
  }, [url]);

  // return the data and loading state from this hook
  return [loadingData, data];
};

现在，您可以在组件中使用此钩子，例如：

const MyComponent = (props) => {
  const [isDataLoading, data] = useFetch('/api/some-url');

  // now check if data is loading, if loading then return a loader/spinner
  if (isDataLoading || !data) return <p>Data is loading...</p>

  // otherwise render your actual component
  return (
    <div>
      <h1>This is my component with data</h1>
    </div>

  );
}