React useEffect 缺少依赖？

Question

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

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

---

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

---

我必须做什么？

Answer 1

<块引用>

我必须做什么？

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

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

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

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

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

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

Answer 2

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

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

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

Answer 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

Answer 4

完全按照 eslint 插件的建议去做：将函数移动到 useEffect 中，你就有了一个干净的依赖数组。 to.read = file(paste(cache_pfad,filename_save,sep = ""), "rb") data<-readBin(to.read, "raw",n = 90000000, endian = "little") close(to.read)` 是那种在 mount 上使用一次的效果，所以 useEffect 是它的完美场所。