React警告：无法对已卸载组件执行状态更新问题求解

触发警告原文：Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application
中文释义：无法在已卸载的组件上执行React状态更新，该操作为空操作，但提示应用存在内存泄漏风险。

这个警告不是只有组件完全从DOM树移除才会触发，你这个二次点击提交才报错的场景，核心是异步请求竞态：

• 第一次点击提交后，getData内的axios请求进入等待状态，请求返回后执行setState，首次渲染正常完成
• 修改输入第二次点击提交时，会触发第二个新的axios请求。如果上一个请求还没返回、且比新请求更晚拿到响应，它要执行的setState对应的更新上下文已经过期，甚至此时旧的<Graph />组件实例已经因为新数据触发重渲染被卸载，就会抛出该警告。

你之前猜测的“组件卸载时加清理函数”思路是对的，但漏了同组件内多次触发请求的过期处理：不是只有整个App组件被卸载才需要清理，每次发起新请求时，都要作废之前还没完成的旧请求。

不要用网上流传的全局isMounted标记方案，那个只能解决组件整体卸载的问题，处理不了同组件多次请求的竞态，还可能出现旧请求返回覆盖新数据的逻辑bug。直接用浏览器原生的AbortController做请求中断+过期判断即可，对现有代码改动很小：

import { useState, useRef, useEffect } from 'react'
import axios from 'axios'

export default function App(props) {
  const [nodes, setNodeDataFromAPI] = useState([])
  const [links, setLinkDataFromAPI] = useState([])
  // 用ref存储当前请求的中断控制器，跨渲染周期保留引用
  const abortControllerRef = useRef(null)

  const handleSubmit = (event) => {
    event.preventDefault()
    // 每次发起新请求前，先中断上一个未完成的旧请求
    if (abortControllerRef.current) {
      abortControllerRef.current.abort()
    }
    // 为新请求生成独立的中断控制器
    const currentController = new AbortController()
    abortControllerRef.current = currentController
    getData(currentController.signal)
  }

  async function getData(signal) {
    try {
      // 将中断信号传给axios，请求被中断时会自动抛出异常
      const response = await axios.get('你的图谱数据接口地址', {
        // 这里传入两个输入框对应的查询参数
        signal
      })
      // 注意原代码这里的数组没有声明，会污染全局作用域，必须加const声明为局部变量
      const graphLinks = []
      const graphNodes = []
      // 此处保留你原有的遍历响应数据、填充两个数组的逻辑

      // 只有当前请求没被标记为作废时，才执行状态更新
      if (!signal.aborted) {
        setNodeDataFromAPI(graphNodes)
        setLinkDataFromAPI(graphLinks)
      }
    } catch (err) {
      // 主动中断的请求不需要抛出错误提示
      if (!['CanceledError', 'AbortError'].includes(err.name)) {
        console.error('图谱数据请求失败:', err)
      }
    }
  }

  // 组件真正从页面卸载时，中断最后一个还在等待的请求
  useEffect(() => {
    return () => {
      abortControllerRef.current?.abort()
    }
  }, [])

  return(
    <Graph linksData={links} nodesData={nodes} /> 
  )
}

关键逻辑说明 #

• 每次发起新请求前主动中断旧请求，从根源上避免旧请求返回后执行无效的setState
• 即使请求没有被axios自动中断，也可以通过signal.aborted属性判断当前请求是否已过期，避免无效更新
• 覆盖两类触发警告的场景：同组件多次请求的竞态、组件整体从页面卸载的清理
• 修复了原代码中未声明graphLinks、graphNodes变量导致的全局作用域污染问题

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