似乎在组件中声明了fetchBusinesses函数。 这意味着在每次渲染中，它都声明了触发钩子的新函数。

有两种方法可以解决这个问题。

将fetchBusinesses函数声明移出组件。 使用useCallback钩子包装fetchBusinesses函数。

第一种选择更可取。

如果您没有在除效果之外的任何地方使用fetchBusinesses方法，您可以简单地将其移动到效果中并避免警告

useEffect(() => {
    const fetchBusinesses = () => {
       return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  };
  fetchBusinesses();
}, []);

然而，如果您在效果之外使用fetchBusinesses，则必须注意两件事

是否有任何问题，你不传递fetchBusinesses作为方法时，它被使用在装载与它的封闭? 你的方法是否依赖于它从封闭包中接收到的一些变量?你不是这样的。 在每次渲染时，fetchBusinesses将被重新创建，因此将它传递给useEffect将会导致问题。因此，如果要将fetchBusinesses传递给依赖数组，首先必须记住它。

总而言之，我想说的是，如果你在useEffect之外使用fetchBusinesses，你可以使用// eslint-disable-next-line react-hooks/ -deps禁用该规则，否则你可以将方法移动到useEffect内部

要禁用规则，可以这样编写

useEffect(() => {
   // other code
   ...
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) 

这不是一个特定于问题用例的答案，而是更普遍的情况，并涵盖了useEffect或提取和导入不工作的情况。 useRef senario:

有时情况是，useEffect应该有一个空数组，你仍然想在useEffect部分的状态中使用，但仍然不想将它们作为依赖注入，你也可以尝试useCallback，现在react抱怨useCallback的依赖，你卡住了。 在这种情况下，在某些情况下可以使用useRef。例如:

const locationRef = useRef(location);
useEffect(()=>{
const qs = locationRef.current.search
...
},[])

在使用这种技术时，您应该小心，并注意useRef不会激活渲染进程。

./src/components/BusinessesList.js
Line 51:  React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array  react-hooks/exhaustive-deps

这不是一个JavaScript/React错误，而是一个ESLint (ESLint -plugin- React -hooks)警告。

它告诉你这个钩子依赖于fetchBusinesses函数，所以你应该把它作为一个依赖项传递。

useEffect(() => {
  fetchBusinesses();
}, [fetchBusinesses]);

如果函数在组件中声明，则可能导致在每次渲染时调用该函数:

const Component = () => {
  /*...*/

  // New function declaration every render
  const fetchBusinesses = () => {
    fetch('/api/businesses/')
      .then(...)
  }

  useEffect(() => {
    fetchBusinesses();
  }, [fetchBusinesses]);

  /*...*/
}

因为每次用新的引用重新声明函数时。

正确的做法是:

const Component = () => {
  /*...*/

  // Keep the function reference
  const fetchBusinesses = useCallback(() => {
    fetch('/api/businesses/')
      .then(...)
  }, [/* Additional dependencies */])

  useEffect(() => {
    fetchBusinesses();
  }, [fetchBusinesses]);

  /*...*/
}

或者只是在useEffect中定义函数。

更多:[ESLint]关于'枯竭-deps' lint规则#14920的反馈

这些警告对于查找不一致更新的组件非常有帮助:从依赖项列表中省略函数是否安全?

然而，如果你想在你的项目中删除警告，你可以添加到你的ESLint配置:

  {
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/exhaustive-deps": 0
    }
  }

如果你正在创建一个新的应用程序或有足够的灵活性，有非常好的状态管理库的选择。看看《后坐力》。

为了完整起见:

1. (停止工作)使用函数作为useEffect回调

useEffect(fetchBusinesses, [])

2. 在useEffect()中声明函数

useEffect(() => {
  function fetchBusinesses() {
    ...
  }
  fetchBusinesses()
}, [])

3.使用useCallback()进行记忆

在这种情况下，如果你的函数中有依赖项，你必须将它们包含在useCallback依赖项数组中，如果函数的参数改变，这将再次触发useEffect。此外，这是一大堆样板文件……因此，只需像1中那样将函数直接传递给useEffect。useEffect (fetchBusinesses[])。

const fetchBusinesses = useCallback(() => {
  ...
}, [])
useEffect(() => {
  fetchBusinesses()
}, [fetchBusinesses])

4. 函数的默认实参

正如Behnam Azimi所说

这不是最佳实践，但在某些情况下可能有用。

useEffect((fetchBusinesses = fetchBusinesses) => {
   fetchBusinesses();
}, []);

5. 创建自定义钩子

创建一个自定义钩子，并在只需要运行一次函数时调用它。它可能更干净。你也可以在需要时返回一个回调来重置重新运行“初始化”。

// customHooks.js
const useInit = (callback, ...args) => {
  const [mounted, setMounted] = useState(false)
  
  const resetInit = () => setMounted(false)

  useEffect(() => {
     if(!mounted) {
        setMounted(true);
        callback(...args);
     }
  },[mounted, callback]);

  return [resetInit]
}

// Component.js
return ({ fetchBusiness, arg1, arg2, requiresRefetch }) => {
  const [resetInit] = useInit(fetchBusiness, arg1, arg2)

  useEffect(() => {
    resetInit()
  }, [requiresRefetch, resetInit]);

6. 禁用eslint的警告

禁用警告应该是您最后的手段，但是当您这样做时，最好是内联且显式地执行，因为未来的开发人员可能会感到困惑，或者在不知道linting关闭的情况下创建意外的错误

useEffect(() => {
  fetchBusinesses()
}, []) // eslint-disable-line react-hooks/exhaustive-deps