Next.js组件开发报错：Unhandled Runtime Error: destroy is not a function

useEffect的回调函数不能直接传入async函数。因为async函数执行后会返回一个Promise对象，而React要求useEffect的返回值要么是一个清理函数（destroy函数），要么是undefined。当React尝试把这个Promise当作清理函数调用时，就会抛出TypeError: destroy is not a function的错误。

方法1：在useEffect内部定义async函数并调用 #

把异步逻辑封装到内部的async函数中，再在useEffect里执行：

"use client"
import { useEffect, useState} from "react";

export default function Page() {
    const [items, setItems] = useState([]);

    useEffect(() => {
        const fetchItems = async () => {
            const response = await fetch("http://localhost:8080/items");
            const data = await response.json();
            setItems(data);
            console.log(data);
        };
        fetchItems();
    }, []);
    

    return (<>
        <div style={{textAlign: "center"}}>Welcome to Items</div>
    </>);
}

方法2：使用立即执行异步函数表达式（IIFE） #

直接在useEffect里写自执行的异步函数：

"use client"
import { useEffect, useState} from "react";

export default function Page() {
    const [items, setItems] = useState([]);

    useEffect(() => {
        (async () => {
            const response = await fetch("http://localhost:8080/items");
            const data = await response.json();
            setItems(data);
            console.log(data);
        })();
    }, []);
    

    return (<>
        <div style={{textAlign: "center"}}>Welcome to Items</div>
    </>);
}

进阶：添加请求清理逻辑（可选） #

如果组件可能在请求完成前卸载，为避免内存泄漏，可用AbortController取消未完成的请求：

"use client"
import { useEffect, useState} from "react";

export default function Page() {
    const [items, setItems] = useState([]);

    useEffect(() => {
        const controller = new AbortController();
        const signal = controller.signal;

        const fetchItems = async () => {
            try {
                const response = await fetch("http://localhost:8080/items", { signal });
                const data = await response.json();
                setItems(data);
                console.log(data);
            } catch (error) {
                if (error.name === "AbortError") {
                    console.log("请求已取消");
                } else {
                    console.error("请求失败:", error);
                }
            }
        };

        fetchItems();

        return () => controller.abort();
    }, []);
    

    return (<>
        <div style={{textAlign: "center"}}>Welcome to Items</div>
    </>);
}

内容的提问来源于stack exchange，提问作者Galax