reactjs typeError:destroy不是函数nextjs

au9on6nz  于 2023-01-17  发布在  React
关注(0)|答案(4)|浏览(171)

当我将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已经变得过于严格,在它的检查,但我会把它的解决方案,为自己和每个人.

vsnjm48y

vsnjm48y1#

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

useEffect(() => someFunction());

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

修复,

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

有关详细信息,请阅读以下文章,
https://typeofnan.dev/fix-uncaught-typeerror-destroy-is-not-a-function-in-react/

yyyllmsg

yyyllmsg2#

我也遇到了同样的问题,我的Next应用程序从V9升级到了V12。我发现它是因为使用效果
我之前的代码类似于(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 wait,不要像这样使用

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

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

const yourFunction = async () => {}

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

8zzbczxx3#

在我维护的代码中有很多地方,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.
yks3o0rb

yks3o0rb4#

在接下来的13中,必须使用以下语法:(您必须在末尾添加[],即使您没有任何var可放入其中)

useEffect(() => {

    // your code here without return

},[])

相关问题