typeError: destroy 不是函数 nextjs答案

【问题标题】：typeError: destroy is not a function nextjstypeError: destroy 不是函数 nextjs
【发布时间】：2023-01-14 02:34:00
【问题描述】：

当我将 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 在检查期间变得过于严格，但我会为自己和每个人写下解决方案。

【问题讨论】：

标签： reactjs react-hooks next.js use-effect

【解决方案1】：

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

错误，

useEffect(() => someFunction());

或者

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

修复，

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

【讨论】：

【解决方案2】：

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

我之前的代码就像 (my Next 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 await。不要这样使用

useEffect(async() =&gt; {},[])

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

const yourFunction = async () => {}

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

【讨论】：

【解决方案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.

【讨论】：

【解决方案4】：

在接下来的 13 中，您必须使用以下语法：（你必须在最后添加 [] ，即使你没有任何变量可以放入它）

useEffect(() => {

    // your code here without return

},[])

【讨论】：