TypeError：销毁不是函数NextJS

Question

当我将NextJS应用程序从9升级到12时。显示了一些错误，这些错误在以前的版本中没有得到照顾。其中之一是：typeError：destion destion不是函数

在控制台中，我可以看到它提到的next-dev.js？3515：25警告：使用效应不得返回函数以外的任何内容，用于清理。您返回了null。如果您的效果不需要清理，请返回未定义（或者没有任何

不确定是因为NextJ的更新在检查过程中变得过于严格，但是我会为自己和每个人都放下解决方案。

Answer 1

在几乎所有情况下，当您尝试从使用效果挂钩中返回任何功能的任何内容时，都会发生此错误。

错误

useEffect(() => someFunction());

或

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

修复程序

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

有关更多信息，请阅读以下文章，

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

Answer 2

我也遇到了同样的问题，我的下一个应用程序从V9升级到V12。我之所以找到它，是因为

以前的使用效果像（我的下一个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]);

这是我的下一个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(async() => {},[])

但是您可以在使用效果之外创建函数异步等待，例如

const yourFunction = async () => {}

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

Answer 3

我要维护的代码中有很多位置，例如使用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时，我会遇到相同的错误，但是就我而言，这是由usefect在异步中引起的。删除异步/等待，然后切换到

。
代码失败的代码

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

有效的

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

Answer 5

这是因为异步回调不能用于使用效率。让我们了解无法直接从useFeff（）挂钩直接调用异步回调函数的原因。这是因为使用效果挂钩期望其效应功能返回清理功能或根本没有

Answer 6

对我来说，错误是我制作了useffect函数差异异步

React.useEffect(async ()=>{
 const data= await getData(`GeneralSales/OrderNumber/${orderNumber.orderNumber}`)
 setOrder(data)
},[])