Question

我正在使用ReactAuseios钩子，通过React useEffect钩子获取组件加载时的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函数时，会出现无限循环。我已经阅读了很多有关该领域的知识，并了解了为什么需要依赖。我不确定useEffect挂钩是获取数据的最佳方法，还是是否有获取数据的方法。

Answer 1

您应该使用getFormData钩子启动useCallback函数，然后将其放入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警告

2 个答案: