Next.js开发中页面回退时报Unhandled Runtime Error:TypeError: destroy is not a function

问题描述

在Next.js开发中，从A页面跳转到B页面，再使用浏览器回退到A页面时报上述错误：

错误原因

是因为在B页面里，在使用useEffect时，错误地定义了异步函数：

    useEffect( async () => {
            const quizs = await getTheoreticalQuiz()
            setQuizs(quizs)
    }, []);

控制台会抛出错误，并给出推荐的写法：

app-index.tsx:25 Warning: useEffect must not return anything besides a function, which is used for clean-up.
It looks like you wrote useEffect(async () => …) or returned a Promise. Instead, write the async function inside your effect and call it immediately:

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

解决办法

按照推荐的写法修改即可：

    useEffect( async () => {
        async function fetchData(){
            const quizs = await getTheoreticalQuiz()
            setQuizs(quizs)
        }
        fetchData()
    }, []);