React setState报错：仅能更新已挂载组件，菜单初始化请求异常

首先，咱们先拆解你遇到的几个核心问题：组件卸载后调用setState的警告、本地页面一直显示"Loading..."、IE兼容性问题，以及本地环境和JSFiddle的差异。

1. 解决"Can only update a mounted or mounting component"警告 #

这个警告的本质是：你的异步API请求还没完成，组件就已经被卸载了，等请求返回后再调用setState就会触发错误。不管你把请求放在哪里，只要是异步操作，都得处理这个场景。

类组件解决方案（添加挂载状态标志） #

在组件里加一个_isMounted变量，跟踪组件是否还在挂载状态，请求回调里先判断这个标志再更新状态：

class SideBar extends React.Component {
  _isMounted = false;

  componentDidMount() {
    this._isMounted = true;
    // 发起菜单请求
    fetch('/api/getMenuList')
      .then(res => res.json())
      .then(menuData => {
        // 只有组件挂载时才更新状态
        if (this._isMounted) {
          this.setState({ menuList: menuData, loading: false });
        }
      })
      .catch(err => {
        if (this._isMounted) {
          this.setState({ error: '菜单加载失败', loading: false });
        }
      });
  }

  componentWillUnmount() {
    // 组件卸载时标记为未挂载
    this._isMounted = false;
  }

  render() {
    const { loading, menuList, error } = this.state;
    if (loading) return <div>Loading...</div>;
    if (error) return <div>{error}</div>;
    // 渲染菜单逻辑
    return <ul>{menuList.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
  }
}

函数组件解决方案（useEffect清理函数） #

如果用的是Hook，就在useEffect里设置一个标志，组件卸载时通过清理函数重置：

import { useState, useEffect } from 'react';

function SideBar() {
  const [menuList, setMenuList] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

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

    const fetchMenu = async () => {
      try {
        const res = await fetch('/api/getMenuList');
        const data = await res.json();
        if (isMounted) {
          setMenuList(data);
          setLoading(false);
        }
      } catch (err) {
        if (isMounted) {
          setError('菜单加载失败');
          setLoading(false);
        }
      }
    };

    fetchMenu();

    // 组件卸载时触发，标记为未挂载
    return () => {
      isMounted = false;
    };
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>{error}</div>;
  return <ul>{menuList.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}

2. 页面一直显示"Loading..."的排查方向 #

JSFiddle能正常运行但本地不行，大概率是本地环境的API请求或编译问题：

• 检查API请求状态：打开浏览器控制台的Network面板，看请求是否成功返回（有没有404/500错误、跨域问题）。如果是跨域，在webpack devServer里配置代理：

  // webpack.config.js
  devServer: {
    proxy: {
      '/api': {
        target: '你的服务器地址',
        changeOrigin: true
      }
    }
  }
  

• 检查状态更新逻辑：确认请求成功/失败后，是否正确把loading设为false，有没有遗漏错误分支的状态更新。
• 对比依赖版本：把JSFiddle里的React、ReactDOM版本和本地package.json里的版本对齐，比如React 18在IE里不兼容，如果你本地用了18，而JSFiddle用的是16，就会出问题。

3. IE兼容性问题解决 #

IE不支持ES6+语法和很多现代API，需要做以下配置：

• 配置Babel编译：在.babelrc或babel.config.json里添加兼容IE的预设：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }],
      "@babel/preset-react"
    ]
  }
  

• 引入Polyfill：在入口文件（比如index.js）顶部引入core-js和regenerator-runtime，补全IE缺失的API：

  import 'core-js/stable';
  import 'regenerator-runtime/runtime';
  

• 禁用React的生产模式警告（IE专属）：IE对某些React的开发模式警告兼容性差，在webpack生产环境配置里添加：

  // webpack.config.js
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
  

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