React useEffect 挂钩缺少依赖项 linter 警告

Question

我正在使用 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 hook是否是获取数据的最佳方式，或者是否有获取数据的方式。

Answer 1

您应该使用 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

Answer 2

问题是您在组件内定义了 getFormData。在每个渲染中，它被重新分配。照原样，这意味着您的初始 useEffect 只会绑定到第一个 getFormData，而不是来自最近渲染的那个。这会导致警告，因为这通常不是您想要的，特别是如果您的 getFormData 依赖于可能更改的状态或道具。

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

React useEffect 挂钩缺少依赖项 linter 警告

React useEffect hook missing dependencies linter warnings

reactjs

react-hooks

use-effect