React触发未挂载组件状态更新警告 已清理定时器仍报错如何修复

你仅清理了防抖定时器，第二个处理搜索请求的useEffect中未处理未完成的异步请求逻辑：当组件已经卸载后，axios请求才返回，此时调用setResults更新已卸载组件的状态，就会触发该警告。

推荐使用AbortController中断未完成的axios请求，既可以解决状态更新警告，还能节省无用的网络开销，修改第二个useEffect逻辑即可：

useEffect(() => {
    // 创建请求中断控制器
    const controller = new AbortController();

    const search = async () => {
        try {
            const {data} = await axios.get('https://en.wikipedia.org/w/api.php', {
                params: {
                    action: 'query',
                    list: 'search',
                    origin: '*',
                    format: 'json',
                    srsearch: debouncedTerm,
                },
                // 绑定中断信号到当前请求
                signal: controller.signal
            });
            setResults(data.query.search);
        } catch (err) {
            // 忽略主动中断请求产生的错误
            if (axios.isCancel(err)) return;
            // 其他业务错误可按需添加处理逻辑
            console.error('搜索请求异常', err);
        }
    };

    if(debouncedTerm){
        search();
    }

    // 清理逻辑：组件卸载或依赖更新时中断未完成的请求
    return () => controller.abort();
}, [debouncedTerm])

如果不需要中断请求，也可以通过挂载状态标记判断是否需要更新状态，仅能解决警告，不会中断无用请求：

useEffect(() => {
    let isMounted = true;

    const search = async () => {
        const {data} = await axios.get('https://en.wikipedia.org/w/api.php', {
            params: {
                action: 'query',
                list: 'search',
                origin: '*',
                format: 'json',
                srsearch: debouncedTerm,
            },
        });
        // 仅组件挂载时更新状态
        if (isMounted) {
            setResults(data.query.search);
        }
    };

    if(debouncedTerm){
        search();
    }

    return () => {
        isMounted = false;
    }
}, [debouncedTerm])

内容的提问来源于stack exchange，提问作者Sercan Noyan Germiyanoğlu