具有数据依赖性的 React Hooks Fetch API

Question

我创建了一个名为“useFetch”的 React Custom Hook 示例，它接收一个 URL，封装了 fetch API。

然后我可以调用自定义钩子从端点获取数据。

这里的问题是，我如何使用第一次 fetch 的结果传递给我的第二次 fetch hook 调用？

我的钩子内部是对 fetch API 的 await 调用，但它不会阻止主组件调用第二个 fetch 钩子。

例子：

function Home() {

  const result = useFetch("https://google.com/");
  const result2 = useFetch("https://yahoo.com/", result);

  return ( <
    >
    // Use results
    <
    />
  );
}

---

useFetch Hook - 调试实现

export default function useFetch(url, data) {
      const [result, setResult] = useState(0);

      async function asyncFetch() {
        let res = await fetch(url);
        setResult(res.url);
      };

      useEffect(() => {
        asyncFetch();
      }, [])

      return res;
    }

---

useFetch 曾经是一个被导入和使用的 javascript 函数，我们可以将它定义为一个等待的异步函数。

但是，现在它是一个钩子，我们不能在 Home() 级别等待 useFetch 执行。