reactjs - 如何修复自定义 Hook 中的 "useEffect has a missing dependency"

Question

我正在使用自定义 Hook 从 API 中提取一些数据，以便在一组 React 函数组件中使用。然而，esLint 抛出了一个可爱的警告:

React Hook useEffect has a missing dependency: 'fetchFromAPI'. Either include it or remove the dependency array.

我不认为它是依赖项，因为它位于 useFetch() 本身内部。我需要这样做，因为我正在使用 await。我究竟做错了什么？直接关闭这条线的警告就可以了吗？或者我应该使用更规范的语法？

function useFetch (url) {
  const [data, setData] = useState(null);

  async function fetchFromAPI() {
    const json = await( await fetch(url) ).json();
    setData(json);
  }

  useEffect(() => {fetchFromAPI()},[url]);

  return data;
};

export {
  useFetch
};

Answer 1

我建议您在 useEffect 本身内部定义异步函数:

function useFetch (url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    async function fetchFromAPI() {
      const json = await( await fetch(url) ).json();
      setData(json);
    }
    fetchFromAPI()
  },[url]);

  return data;
};

您可以查看 doc faqs 中的有效示例它在 useEffect 本身内部使用异步函数:

function ProductPage({ productId }) {
  const [product, setProduct] = useState(null);

  useEffect(() => {
    // By moving this function inside the effect, 
    // we can clearly see the values it uses.
    async function fetchProduct() {
      const response = await fetch('http://myapi/product' + productId);
      const json = await response.json();
      setProduct(json);
    }

    fetchProduct();
  }, [productId]); // ✅ Valid because our effect only uses productId
  // ...
}