如果您没有在效果之外的任何地方使用 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，则必须注意两件事

1. 当它在带有封闭闭包的挂载期间使用时，您没有将其fetchBusinesses作为方法传递是否有任何问题？
2. 你的方法是否依赖于它从封闭闭包中接收到的一些变量？这不是你的情况。
3. 在每次渲染时，将重新创建 fetchBusinesses，因此将其传递给 useEffect 会导致问题。因此，如果要将 fetchBusinesses 传递给依赖项数组，则首先必须记住它。

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

要禁用规则，您可以像这样写

useEffect(() => {
   // other code
   ...

   // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) 

编辑 09/20/2021

如果您正在创建新应用程序或有足够的灵活性，那么状态管理库有非常好的选择。看看反冲。

只是为了完整性：

1. （停止工作）使用函数作为useEffect回调

useEffect(fetchBusinesses, [])

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

3. 记忆 useCallback()

在这种情况下，如果您的函数中有依赖项，则必须将它们包含在useCallback依赖项数组中，useEffect如果函数的参数发生更改，这将再次触发。此外，它是很多样板......所以只需将函数直接传递给useEffectas in 1. useEffect(fetchBusinesses, [])。

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

4. 函数的默认参数

正如https://stackoverflow.com/a/61183162/5552686所建议的

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

原回复

您可以直接将其设置为useEffect回调：

useEffect(fetchBusinesses, [])

它只会触发一次，因此请确保正确设置了所有函数的依赖项（与 using 相同componentDidMount/componentWillMount...）

./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) 警告。

它告诉您钩子依赖于 function 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] 'exhaustive-deps' lint 规则的反馈 #14920

React 也给出了解决方案。他们建议您使用useCallback它将返回您的函数的记忆版本：

'fetchBusinesses' 函数使 useEffect Hook（在第 NN 行）的依赖项在每次渲染时发生变化。要解决此问题，请将 'fetchBusinesses' 定义包装到它自己的 useCallback() 钩子 react-hooks/exhaustive-deps 中

useCallback使用简单，因为它具有与useEffect. 不同之处在于 useCallback 返回一个函数。它看起来像这样：

 const fetchBusinesses = useCallback( () => {
        return fetch("theURL", {method: "GET"}
    )
    .then(() => { /* Some stuff */ })
    .catch(() => { /* Some error handling */ })
  }, [/* deps */])
  // We have a first effect that uses fetchBusinesses
  useEffect(() => {
    // Do things and then fetchBusinesses
    fetchBusinesses();
  }, [fetchBusinesses]);
   // We can have many effects that use fetchBusinesses
  useEffect(() => {
    // Do other things and then fetchBusinesses
    fetchBusinesses();
  }, [fetchBusinesses]);

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

但是，如果您想删除整个项目中的警告，您可以将其添加到您的 ESLint 配置中：

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