ReactJS中使用字符串变量替代字符串字面量时出现「无法在已卸载组件上执行React状态更新」错误的解决方法

我明白你的困惑——明明没用到useEffect，却出现了这个内存泄漏警告，而且只是把字符串字面量换成变量就出问题了。让我一步步帮你理清原因和解决方案：

问题根源 #

Webpack（React项目常用的打包工具）对require的处理是静态优先的：

• 当你用字符串字面量（比如require('./us.svg')），Webpack在打包时就能确定要加载的文件，直接把资源打包进代码，运行时同步加载，不会有异步操作。
• 但当你用变量（比如require(fileName2)），Webpack无法提前知道要加载哪个文件，会把当前目录下所有符合规则的文件都打包进去，运行时再动态查找对应的资源。这个过程虽然看起来是同步的，但Webpack的内部处理可能会隐含一些异步逻辑，当组件在这个动态加载过程中被卸载，就会触发这个警告（React误以为有未完成的异步状态更新）。

解决方案 #

方案1：使用静态可分析的动态路径（推荐） #

如果你的图标都是放在同一目录下，命名规则是[twoCharLocationCode].svg，可以用模板字符串让Webpack能静态分析范围，同时支持动态变量：

type FlagIconProps = { twoCharLocationCode: string, widthPx?: string }
const FlagIcon = ({ twoCharLocationCode, widthPx = '32px' }: FlagIconProps) => {
  // 用模板字符串限定路径，Webpack会打包所有./[xxx].svg文件
  const flagIconImg: string = require(`./${twoCharLocationCode}.svg`).default
  return (
    <img src={flagIconImg} className="flag-icon" alt="flag-icon" width={widthPx} />
  )
}
export default FlagIcon

这种方式既保留了动态变量的灵活性，又让Webpack能静态处理路径，避免隐含的异步逻辑，也就不会触发警告了。

方案2：用异步导入+状态管理（适合更复杂的场景） #

如果你的图标路径规则更复杂，或者需要按需加载，可以用import()异步导入，配合useState和useEffect来处理，同时在cleanup中忽略已卸载组件的加载结果：

import { useState, useEffect } from 'react';

type FlagIconProps = { twoCharLocationCode: string, widthPx?: string }
const FlagIcon = ({ twoCharLocationCode, widthPx = '32px' }: FlagIconProps) => {
  const [flagSrc, setFlagSrc] = useState<string | null>(null);

  useEffect(() => {
    let isMounted = true;
    // 异步导入图标
    import(`./${twoCharLocationCode}.svg`)
      .then(module => {
        if (isMounted) {
          setFlagSrc(module.default);
        }
      })
      .catch(err => console.error('加载图标失败:', err));

    // 组件卸载时标记为已卸载，避免更新状态
    return () => {
      isMounted = false;
    };
  }, [twoCharLocationCode]);

  if (!flagSrc) {
    return <div className="flag-icon-loading">加载中...</div>; // 可选的加载状态
  }

  return (
    <img src={flagSrc} className="flag-icon" alt="flag-icon" width={widthPx} />
  )
}
export default FlagIcon

这种方式明确处理了异步加载的生命周期，确保组件卸载后不会更新状态，彻底解决警告问题。

额外说明 #

虽然你没直接写useEffect，但Webpack处理动态require时的内部逻辑可能触发了类似异步操作的场景，导致React检测到“卸载后更新”的情况。上面的两种方案都能解决这个问题，根据你的实际场景选择即可。

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