UseFetch returns无法对未安装的组件执行React状态更新

当我使用这个useFetch钩子时,我的应用程序会显示一个空白屏幕并返回:

无法对已卸载的组件执行React状态更新。这是 无操作,但表示应用程序内存泄漏。为了修复, 取消useEffect清理中的所有订阅和异步任务 作用

我不明白为什么会出问题。

import { useState, useEffect } from "react";

export default function useFetch(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    (async function () {
      try {
        setLoading(true);
        const response = await fetch(url, {
          method: "GET"
        });
        const data = await response.json();
        setData(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    })();
  }, [url]);

  return { data, error, loading };
}

export const useFetchCarById = (testId) =>
  useFetch(
    `https://localhost/cars/${testId}`
  );

export default function Foo() {
  const { cars, car } = useContext(Context);
  const { data, error, loading } = useFetchCarById(car);

  return (
    <div>
      {data && data.map((x) => <p>{x.startTime}</p>)}
    </div>
  );
}