MERNG栈项目插入Semantic UI React按钮报无法找到已卸载组件节点错误

我正在基于MERNG栈开发一个个人侧项目，尝试将Semantic UI React文档中的按钮添加到代码中时持续遇到报错。我要使用的按钮来自官方链接：Semantic UI React Labeled Button 文档，只要尝试实现对应代码就会抛出错误：Error: Unable to find node on an unmounted component，我不清楚报错的具体触发原因。我的GitHub仓库地址为：React-Social-App，目前我隐藏了用于连接数据库的config.js文件，其中存储了私密密钥。


恳请协助排查问题。

排查方案 #

• 优先检查版本兼容性：Semantic UI React v2.1.4以下版本不兼容React 18，会在组件生命周期逻辑中出现卸载后访问DOM节点的报错，可先执行npm ls react semantic-ui-react确认版本匹配，不匹配的话升级semantic-ui-react到最新稳定版即可解决绝大多数同类问题。
• 检查异步操作逻辑：如果按钮绑定了点赞、删除等异步请求，要处理组件提前卸载的边界场景：给组件加挂载状态标记，异步回调执行前先判断组件是否还处于挂载状态，再执行状态更新操作，参考代码：

import { useRef, useEffect } from 'react'

const PostCard = () => {
  const isMountedRef = useRef(true)

  const handleButtonClick = async () => {
    const res = await fetchYourApi()
    // 仅组件挂载时更新状态
    if (isMountedRef.current) {
      // 你的状态更新逻辑
    }
  }

  useEffect(() => {
    return () => {
      isMountedRef.current = false
    }
  }, [])
}

• 检查组件写法是否符合规范：确认Button组件是从semantic-ui-react包直接导入，没有自定义封装逻辑导致ref传递错误；Labeled按钮的写法严格和官方示例对齐，不要额外添加未声明的属性或者嵌套非法子元素。
• 临时关闭React严格模式测试：React 18的严格模式会触发两次组件挂载卸载流程，会放大组件库的兼容问题，可先去掉入口文件的<React.StrictMode>包裹，测试报错是否消失。

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