旧React类组件i18next初始化异步API翻译数据赋值问题求解

• 你遇到的执行顺序异常、resources.en赋值为undefined的核心原因是：apiDelegate.getTranslations()是异步Promise任务，i18n初始化属于同步任务，同步代码执行时接口请求还未返回，直接在初始化阶段给resources.en赋值拿到的自然是undefined；等接口请求完成触发output1弹窗时，i18n实例早就初始化结束，后续组件调用i18n.t()自然读不到正确的翻译值。
• 你观察到的弹窗顺序output2→output3→output1完全符合JS事件循环规则：同步代码里的output2、output3会先入执行栈运行，等同步栈清空后才会执行Promise微任务里的output1逻辑。

不需要强行改同步逻辑，也不需要写死setTimeout猜接口返回时间，用i18next原生支持的动态资源注入能力+Promise链式调用即可解决，全量兼容老babel、class组件场景：

• 第一步：调整i18n初始化逻辑，初始化时不依赖异步接口数据
  初始化时给英文翻译资源留空占位，等接口返回后再通过官方API注入资源，不需要重新初始化i18n实例。参考配置代码：

// 你的i18.js配置文件
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import apiDelegate from '对应apiDelegate引入路径';

// 先完成基础初始化，en资源先填空对象占位，避免初始化报错
i18n
  .use(initReactI18next)
  .init({
    lng: 'en',
    fallbackLng: 'en',
    resources: {
      en: {
        translation: {} // 空占位，后续动态注入
      }
    },
    interpolation: {
      escapeValue: false
    }
  });

// 用Promise.then链式调用处理接口返回，完全兼容不支持async/await的环境
apiDelegate.getTranslations()
  .then(function (translationData) {
    // 动态注入英文翻译资源，参数依次为：语言、命名空间、翻译数据、是否深合并、是否覆盖现有资源
    i18n.addResourceBundle('en', 'translation', translationData, true, true);
    // 这里放你之前的output1逻辑即可，此时translationData一定是接口返回的有效值
  })
  .catch(function (err) {
    console.error('翻译资源加载失败', err);
  });

export default i18n;

• 第二步：根组件增加翻译加载态，避免组件提前渲染拿到空翻译值
  因为i18n初始化时翻译资源为空，如果业务组件直接挂载，首次调用t()会直接返回key字符串，在class组件里通过监听i18n加载事件控制渲染时机即可：

// 项目根组件
import React from 'react';
import i18n from './i18';
import BusinessPage from './BusinessPage';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      transLoaded: false
    };
  }

  componentDidMount() {
    // 监听i18n资源加载完成事件，资源注入完成后再渲染业务内容
    i18n.on('loaded', () => {
      this.setState({ transLoaded: true });
    });
    // 增加超时兜底，避免接口异常导致页面永久白屏
    setTimeout(() => {
      if (!this.state.transLoaded) this.setState({ transLoaded: true });
    }, 3000);
  }

  render() {
    if (!this.state.transLoaded) return <div>加载中...</div>;
    return <BusinessPage />;
  }
}

export default App;

• 方案说明：
  • 全程使用ES5兼容语法，不需要async/await，不需要调整babel、webpack配置，不会引发构建失败
  • 不依赖写死延时的setTimeout，不会出现网络慢时赋值不及时、网络快时空等的问题
  • addResourceBundle 是i18next官方提供的原生API，注入资源后所有已挂载、后续挂载的组件调用i18n.t()都会自动读取最新翻译值，不需要额外刷新或重置实例

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