Reactjs 如何修复此“React Hook Useffect缺少依赖项”警告？

这是我的档案：

// useFetcher.js
import { useEffect, useState } from "react";

export default function useFetcher(action) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);
  async function loadData() {
    try {
      setLoading(true);
      const actionData = await action();
      setData(actionData);
    } catch (e) {
      setError(e);
    } finally {
      setLoading(false);
    }
  }
  useEffect(() => {
    loadData();
  }, [action]);
  return [data, loading, error];
}

在第21行，eslint投诉：

React Hook useEffect has a missing dependency: 'loadData'. Either include it or remove the dependency array.eslint(react-hooks/exhaustive-deps)

如何修复此问题？

在useEffect中将loadData函数添加到数组中。这将消除投诉：

useEffect(() => {
  loadData();
}, [action, loadData]);

---

这里最好的方法是在useEffect中定义异步函数：

---

更多信息请参见。

现在它告诉我“loadData”函数使第21行的useEffect挂钩的依赖项在每次渲染时都发生变化。将其移动到useEffect回调中。或者，将“loadData”定义包装到其自己的useCallback钩子中。如果我将loadData移动到useEffect的回调中，警告将消失。我不熟悉hooks，这是一个好的实践吗？一个好的linter会告诉你这是没有用的，除非loadData来自一个依赖于action的useCallback。如果您将vscode与eslint插件一起使用，并使用最新的create react应用程序创建应用程序，您将看到错误。有趣。我是胡克斯的新手，有关于这个区块范围的文档吗？我强烈建议你阅读D.阿布拉莫夫的这篇文章：如果你不喜欢深潜，你可能想等到这些解释出现在其他地方。就像2013年《React》上映时一样，人们需要一段时间才能认识到一种不同的思维模式并加以传授。到目前为止，我喜欢这个帖子！当您在异步函数完成后设置状态时，您应该

export default function useFetcher(action) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  useEffect(() => {
    async function loadData() {
      try {
        setLoading(true);
        const actionData = await action();
        setData(actionData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    loadData();
  }, [action]);
  return [data, loading, error];
}