如何在自定義掛鈎中修復“useEffect 缺少依賴項”

Question

我正在使用自定義鈎子從 API 中獲取一些數據，以便在一組 React function 組件中使用。 然而，esLint 拋出了一個可愛的警告：

React Hook useEffect 缺少依賴項：'fetchFromAPI'。 包括它或刪除依賴數組。

我不認為這是一個依賴，因為它在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

在自定義效果之外聲明它，傳遞url作為參數並return json以在useEffect中設置

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

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

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

  return data;
};

或者直接在useEffect里面

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

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

  return data;
};

Answer 2

我建議您在 useEffect 本身中定義 async function ：

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：

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
  // ...
}

Answer 3

只需將您的 function 移動到 useEffect 中，一切都會好起來的：

import { useState, useEffect } from "react";

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;
}

export { useFetch };

https://codesandbox.io/s/clever-cdn-8g0me

Answer 4

async function fetchFromAPI(url) {
  return ( await fetch(url) ).json();
}

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

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

  return data;
};

export {
  useFetch
};

1. 您可以稍作更改，然后提取fetchFromAPI ，因為每次調用 useFetch 時都不會創建，這對單一職責也有好處。
2. 如果您非常了解此代碼，當然您可以關閉當前行的 linting，或者您可以添加 rest setData和fetchFromAPI參數。 並且完全按照這個順序。 因為在重新渲染參數比較從第一個參數到最后一個參數時，最好將更改最多的參數放在第一位，因為每次更改下一個參數時都不檢查未更改的參數，所以如果第一次更改， useEffect不需要檢查其他人並提前致電通過 function