反应useEffect缺少依赖？答案

【问题标题】：React useEffect missing dependecy?反应useEffect缺少依赖？
【发布时间】：2021-07-17 21:24:44
【问题描述】：

通常我会收到这样的警告，React Hook useEffect 缺少依赖项：'loadAllAbout'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps

我有这样的代码，但是当我给 [loadAllAbout] 时也会收到警告

第 15:9 行：“loadAllAbout”函数使 useEffect Hook（第 13 行）的依赖关系在每次渲染时都发生变化。将它移到 useEffect 回调中。或者，将 'loadAllAbout' 的定义包装在它自己的 useCallback() Hook react-hooks/exhaustive-deps 中

我要做什么？

【问题讨论】：

欢迎来到 Stack Overflow！请使用tour，环顾四周，并通读help center，尤其是How do I ask a good question? 请张贴代码、错误消息、标记等。作为文本，而不是作为图片的文字。为什么：meta.stackoverflow.com/q/285551/157247
Please post code as text, not images of text.
警告几乎准确地告诉您您需要做什么。似乎最好的做法是将loadAllAbout 函数放入useCallback()

标签： javascript reactjs

【解决方案1】：

我要做什么？

错误说明的两件事之一，或者只是删除函数并将其中的逻辑直接放入您的 useEffect 回调中，如果您只从该回调中使用它。

以下是错误消息为您提供的两个选项：将loadAllAbout 函数移动到您的useEffect 回调中：

useEffect(() => {
    // ...code using `loadAllAbout` (here or after it, either is fine)...

    function loadAllAbout() {
        // ...
    }
}, []);

或者使用useCallback 或类似方法使loadAllAbout 不是每次组件函数运行时的新函数：

const loadAllAbout = useCallback(() => {
    // ...
}, []);

【讨论】：

注意：我没有尝试读取图片中的代码。

【解决方案2】：

因为loadAllAbout 在每次渲染时都会重新创建，因此将其添加为依赖项实际上会导致您的效果在每次渲染时运行。

在某些情况下，可以安全地忽略缺少依赖项的警告。在这里，由于你的效果只运行一次来初始化一些数据，应该没问题。

如果您的组件要重新渲染多次，记忆 loadAllAbout 并将其作为依赖项包含将是一个更完整的解决方案，但在您的情况下这可能不是必需的。

【讨论】：

【解决方案3】：

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

useEffect(loadAllAbout, [])

2。在 useEffect() 中声明函数

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

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

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

4.禁用 eslint 的警告

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

【讨论】：

【解决方案4】：

完全按照 eslint 插件的建议进行操作：将函数移动到 useEffect 中，您就有了一个干净的依赖数组。 loadAllAbout 是在 mount 上使用一次的那种效果，所以 useEffect 是它的理想场所。

【讨论】：