React useEffect 掛鈎缺少依賴項 linter 警告

Question

我正在使用 React useEffect 掛鈎通過 useAxios 掛鈎獲取有關組件加載的 API 數據。 代碼如下（已簡化）：

const [formData, setFormData] = useState<FormData>();   

const [{ , executeGet] = useAxios('', {
    manual: true,
});

const getFormData = async () => {
    let r = await executeGet({ url: `http://blahblahblah/`});
    return r.data;
};

useEffect(() => {
    const getData = async () => {
        try {
            let response = await getAPIData();
            if (response) {
                setFormData(response);
        } catch (e) {
            setFormError(true);
        }
    };
    getData();
}, []); 

這種模式在代碼庫中經常使用，但我收到了 linter 警告：

React Hook useEffect has missing dependencies: 'getFormData'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

我可以通過以下方式成功抑制警告：

// eslint-disable-line react-hooks/exhaustive-deps

但是這樣做感覺不對！

我可以毫無問題地將常量添加到依賴項列表，但是當我添加 getFormData function 時，我得到一個無限循環。 我已經閱讀了很多該地區的文章並理解為什么需要依賴項。 我不確定 useEffect 掛鈎是否是獲取數據的最佳方式，或者是否有獲取數據的方式。

Answer 1

您應該使用useCallback掛鈎啟動getFormData function，然后將其放入 useEffect 依賴列表中。

const getFormData = useCallback(async () => {
  let r = await executeGet({ url: `http://blahblahblah/`});
  return r.data;
}, [executeGet]);

你可以在 reactjs 網站閱讀更多關於useCallback的信息： https://reactjs.org/docs/hooks-reference.html#usecallback

Answer 2

問題是您在組件內定義 getFormData 。 在每個渲染中，它被重新分配。 照原樣，這意味着您的初始 useEffect 只會綁定到第一個 getFormData，而不是來自最近渲染的那個。 這會導致警告，因為這通常不是您想要的，特別是如果您的 getFormData 依賴於 state 或可能更改的道具。

在這種情況下，最簡單的解決方案是將 getFormData 的定義移到組件之外，並直接使用 Axios 而不是使用掛鈎。 這樣就不需要在每次渲染時都定義它。