React类组件调用setState更新状态失败 报组件未挂载警告

• React 类组件的生命周期调度、setState更新触发、DOM渲染全流程都由React框架本身管控，手动通过new关键字实例化组件类，仅会生成一个普通JavaScript对象，完全不会进入React的组件挂载流程，这个实例既不会被加入React组件树，也不会绑定框架层面的更新调度逻辑。
• 手动调用自定义的componentDidMount方法，只是执行了一个普通的类方法，不会修改React内部对组件挂载状态的标记。React检测到组件未完成挂载，会直接拦截setState调用，抛出对应警告，状态更新操作会变成空操作，不会触发任何渲染。
• 手动实例化的组件从未执行React的render挂载流程，哪怕直接修改实例上的state属性，对应的DOM节点也不会被插入页面，完全无法实现Toast的展示效果。

核心原则：所有React组件必须交由React渲染流程挂载，不要手动实例化组件类。全局Toast只需要在应用根节点提前挂载一次，通过全局可访问的方法触发状态更新即可，以下是无额外依赖的最简实现：

第一步：改造Toast组件，暴露全局调用方法 #

// toaster.js
import { Component } from "react";
import { Toast } from "react-bootstrap";

// 存储已挂载的Toast组件实例引用
let globalToastRef = null;

class CustomToaster extends Component {
  constructor(props) {
    super(props)    
    this.state = {
      title: 'no title',
      time: '2 min',
      description: 'no desription',
      show: false
    }
  }

  componentDidMount() {
    // 组件挂载完成后，将实例引用存到全局变量
    globalToastRef = this;
  }

  componentWillUnmount() {
    globalToastRef = null;
    clearTimeout(this.hideTimer)
  }

  setToaster = (title, description = '', time = '', delay = 5000) => {
    clearTimeout(this.hideTimer)
    this.setState({
      title,
      time,
      description,
      show: true
    }, () => {
      // 到时自动隐藏
      this.hideTimer = setTimeout(() => {
        this.setState({ show: false })
      }, delay)
    })
  }

  render() {
    return (
      <Toast 
        show={this.state.show} 
        autohide 
        onClose={() => this.setState({show: false})}
      >
        <Toast.Header>
          <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" />
          <strong className="me-auto">{this.state.title}</strong>
          <small>{this.state.time}</small>
        </Toast.Header>
        <Toast.Body>{this.state.description}</Toast.Body>
      </Toast>
    )
  }
}

// 导出全局调用方法，不需要实例化组件
export const showAlert = (title, description, time, delay) => {
  if (!globalToastRef) {
    console.warn('CustomToaster未挂载，请确认已在应用根组件引入该组件');
    return;
  }
  globalToastRef.setToaster(title, description, time, delay);
}

export default CustomToaster;

第二步：在应用根组件挂载全局Toast #

在应用最外层组件（通常是App.jsx）引入CustomToaster并渲染，保证组件在应用运行全程处于挂载状态：

// App.jsx
import CustomToaster from "./toaster/toaster";

function App() {
  return (
    <div className="app-container">
      {/* 原有路由、页面业务代码 */}
      <CustomToaster />
    </div>
  )
}

export default App;

第三步：业务代码中直接调用全局方法 #

在api-service.js等非组件逻辑中，直接引入导出的showAlert方法即可触发Toast展示，不需要手动实例化组件：

// api-service.js
import { showAlert } from "../toaster/toaster";

export async function saveData(){
  try {
    const res = await fetch('http://localhost:5000/test',{
      headers:{ "authorization":"my-auth-token" }
    })
    const data = await res.json();
    return data
  } catch (error) {
    console.log(error)
    showAlert('请求异常', error.message, '刚刚')
  }
}

如果需要支持多Toast堆叠展示，只需要把单实例的全局引用改成队列数组，渲染时遍历队列生成多个Toast节点，调用时往队列推入新配置、超时后自动从队列移除对应项即可，核心逻辑和上述实现一致。

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