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 而不是使用挂钩。 这样就不需要在每次渲染时都定义它。