typeError：destroy 不是函数 nextjs

Question

当我将 nextjs 应用程序从 9 升级到 12 时。显示了一些错误，这些错误在以前的版本中没有得到处理。其中之一是：

typeError: destroy is not a function

在控制台中我可以看到它提到了

next-dev.js?3515:25 Warning: useEffect must not return anything besides a function, which is used for clean-up. You returned null. If your effect does not require clean up, return undefined (or nothing

不确定是不是因为更新后nextjs在检查时变得太严格了，但我会把解决方案写下来给我自己和大家。

Answer 1

在几乎所有情况下，当您尝试从 useEffect 挂钩返回非函数的任何内容时，都会发生此错误。

故障，

useEffect(() => someFunction());

或

useEffect(() => {
   return someFunction();
});

修复，

useEffect(() => {
   someFunction();
});

欲了解更多信息，请阅读以下文章，

https://typeofnan.dev/fix-uncaught-typeerror-destroy-is-not-a-function-in-react/

Answer 2

我也遇到了同样的问题，我将我的 Next 应用程序从 v9 升级到 v12。我发现它是因为 useEffect

我之前的代码就像（我的下一个 v9）=

  useEffect(() => {
    return () => {
      removeEventListener("blur", updateWarning);

      const inputFile = document.getElementById("input-file-ujian");
      if (inputFile) {
        inputFile.removeEventListener("click", (e) => {
          window.removeEventListener("blur", updateWarning);
        });
        inputFile.removeEventListener("change", handleChange);
      }

      const videos = document.getElementsByClassName("note-video-clip");
      for (let i = 0; i < videos.length; i++) {
        videos[i].removeEventListener("mouseleave", () => {
          window.addEventListener("blur", updateWarning);
        });
        videos[i].removeEventListener("mouseenter", () => {
          window.removeEventListener("blur", updateWarning);
        });
      }
    };
  }, [pesertaUjian, warning]);

这是我的 Next v12（我删除了返回代码）=

useEffect(() => {
      removeEventListener("blur", updateWarning);

      const inputFile = document.getElementById("input-file-ujian");
      if (inputFile) {
        inputFile.removeEventListener("click", (e) => {
          window.removeEventListener("blur", updateWarning);
        });
        inputFile.removeEventListener("change", handleChange);
      }

      const videos = document.getElementsByClassName("note-video-clip");
      for (let i = 0; i < videos.length; i++) {
        videos[i].removeEventListener("mouseleave", () => {
          window.addEventListener("blur", updateWarning);
        });
        videos[i].removeEventListener("mouseenter", () => {
          window.removeEventListener("blur", updateWarning);
        });
      }
  }, [pesertaUjian, warning]);

我不知道为什么，我只是删除了 useEffect 中的所有返回代码，这对我有用

更新： 更新，我发现如果您使用 useEffect 和 async wait 。不要这样使用

useEffect(async() => {},[])

但是您可以在 useEffect 之外创建函数 async wait，例如

const yourFunction = async () => {}

useEffect(() => yourFunction(),[])

Answer 3

我正在维护的代码中有很多地方 useEffect 返回

null

，例如：

useEffect(() => {
   if (variantSelected) {
     const productViewTrackingTimeout = setTimeout(
       useProductViewTracking({
        ...blah blah
       }),
       1000
     );
     return () => {
       clearTimeout(productViewTrackingTimeout);
     };
   }
   return null;
 }, [variantSelected, productTitle, router]);```

I removed all return null values, and just putting a return works too. But not any value.

Answer 4

从 React 17 更新到 18 时，我遇到了同样的错误，但就我而言，这是由

useEffect

中的函数异步引起的。删除 async/await 并切换到

.then(result => {...}

为我解决了这个问题。

艾克斯：
失败的代码

useEffect(async () => {
  const result = await fetchData()
  // Do stuff
})

有效的代码

useEffect(() => {
  fetchData().then(result => {
    // Do stuff
  })
})

Answer 5

这是因为useEffect中不能使用异步回调。让我们了解为什么不能直接从 useEffect() 挂钩调用异步回调函数的原因。这是因为 useEffect 钩子期望其效果函数返回清理函数或根本不返回任何内容