反应 useEffect 挂钩缺少依赖项 linter 警告答案

【问题标题】：React useEffect hook missing dependencies linter warnings反应 useEffect 挂钩缺少依赖项 linter 警告
【发布时间】：2020-09-03 02:09:14
【问题描述】：

我正在使用 React useEffect 挂钩来获取有关组件加载的 API 数据，并使用 useAxios 挂钩。代码如下（简化）：

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 函数时，我得到了一个无限循环。我已经阅读了很多有关该区域的内容，并了解为什么需要依赖项。我不确定 useEffect 钩子是否是获取数据的最佳方式，或者是否有获取数据的方法。

【问题讨论】：

标签： reactjs react-hooks use-effect

【解决方案1】：

问题是您在组件中定义 getFormData。在每次渲染中，它都会被重新分配。实际上，这意味着您的初始 useEffect 只会绑定到第一个 getFormData，而不是最近渲染的那个。这会导致警告，因为这通常不是您想要的，尤其是当您的 getFormData 依赖于可能更改的状态或道具时。

在这种情况下，最简单的解决方案是将 getFormData 的定义移到组件之外，并直接使用 Axios 而不是使用钩子。这样就不需要在每次渲染时都定义它了。

【讨论】：

【解决方案2】：

你应该使用useCallback钩子启动getFormData函数，然后把它放到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

【讨论】：

谢谢，但不幸的是，这仍然会导致无限循环（useCallback 也需要依赖数组）。