如果在useEffect中使用的变量是在组件内部定义的，或者是作为道具传递给组件的，则会发生此警告。因为你在同一个组件中定义了fetchBusinesses()，而eslint遵循这一规则，你必须将它传递给依赖数组。但在您的情况下，只传递[]也可以

在这种情况下，它将工作，但如果fetchBusinesses在函数中使用setState，并且调用它将重新呈现组件，因此您的fetchBusinesses将改变，因此useEffect将运行，这将创建一个无限循环。因此，仅仅盲目地遵循eslint可能会导致额外的错误。

用例解决方案让eslint满意，使用useCallback和[]。

const memoizedFetchBusinesses=useCallback(
        fetchBusinesses,
        [] // unlike useEffect you always have to pass a dependency array
       )

当组件第一次呈现时，在内存中创建一个名为fetchBusinessess的函数，并创建memoizedFetchBusinesses变量，该变量也在内存中引用相同的函数。

在第一次渲染之后，一个被称为fetchbusiness的函数将再次被创建，但这一次在不同的内存位置，因为我们在useCallback中有[]，memoizedFetchBusinesses将在相同的内存中给你原始的fetchBusinesses函数。这里的useCallback将为您提供在组件的第一次呈现中创建的相同的函数引用。

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

相反，你可以这样定义函数

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

然后在useEffect中

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

如果您想禁用这个无用的消息，只需在文件的开头添加这个。

/* eslint-disable react-hooks/exhaustive-deps */

这将禁用整个文件的警告。

好吧，如果你想从不同的角度来看这个问题，你只需要知道React有哪些非耗尽的选项。你不应该在效果中使用闭包函数的原因之一是在每次渲染时，它都会被重新创建/销毁。

因此，钩子中有多个React方法被认为是稳定的和非耗尽的，在这些方法中，您不必应用到useEffect依赖项，并且反过来也不会破坏React -hooks/竭-deps的约定规则。例如，useReducer或useState的第二个返回变量是一个函数。

const [,dispatch] = useReducer(reducer, {});

useEffect(() => {
    dispatch(); // Non-exhausted - ESLint won't nag about this
}, []);

所以反过来，你可以让所有的外部依赖关系与你在reducer函数中的当前依赖关系共存。

const [,dispatch] = useReducer((current, update) => {
    const { foobar } = update;
    // Logic

    return { ...current, ...update };
}), {});

const [foobar, setFoobar] = useState(false);

useEffect(() => {
    dispatch({ foobar }); // non-exhausted `dispatch` function
}, [foobar]);

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

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

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

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

你正在使用useEffect，当你这样做的时候，你经常会想要使用一些变量作为你的组件中的道具或状态。

eslint中有一个规则，它希望你引用useEffect依赖数组中任何不同的道具或状态块。这是控制何时执行useEffect的数组。该规则希望看到它列在数组中，数组决定何时重新运行useEffect函数。

因此，您需要添加[fetchBusinesses]，这样警告就会消失。

为什么这个规则要我们把它写在这里?

在某些情况下，使用useEffect而没有正确列出数组内的所有状态和道具，可能会导致奇怪且难以调试的问题。

因此，这条规则有助于避免使用useEffect可能出现的那些难以理解的问题。

现在，任意添加到该数组也会导致错误。所以无论哪种方式，你都遇到了必须解决的bug。根据你的评论，似乎为你解决了这个问题，但我想进一步调查，看看你是否有机会在你的网络选项卡在Chrome中添加fetchBusinesses函数到你的useEffect数组后得到第二个GET请求。

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

为了完整起见:

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