react-intl-universal中intl.get()值未加载到导入对象的问题

核心原因：执行时机不匹配 #

当你在模块级别定义并导出menuOptionsToContent对象时，这个对象会在模块加载阶段就被创建并执行所有内部代码。而react-intl-universal的初始化（包括加载国际化资源、绑定当前语言）通常是在React组件的生命周期（比如useEffect、componentDidMount）中完成的，此时模块已经加载完毕，intl.get()在初始化前执行自然找不到对应的国际化key，返回空字符串。

解决办法 #

1. 将菜单配置改为函数，延迟执行intl.get() #

不要直接导出静态对象，而是导出一个返回配置的函数，在intl初始化完成后再调用这个函数：

// menu-config.js
import intl from 'react-intl-universal';

// 改为函数形式
export const getMenuOptions = () => [
  { name: intl.get('menu.home'), key: 'home' },
  { name: intl.get('menu.setting'), key: 'setting' },
  // ...其他菜单项
];

在组件中使用（确保intl已初始化）：

// 组件文件
import { getMenuOptions } from './menu-config';

function SideMenu() {
  // 可以在useEffect或render阶段调用
  const menuOptions = getMenuOptions();

  return (
    <Menu>
      {menuOptions.map(item => (
        <Menu.Item key={item.key}>{item.name}</Menu.Item>
      ))}
    </Menu>
  );
}

2. 存储国际化key而非直接调用intl.get() #

在配置对象中只存key，等到渲染阶段再调用intl.get()获取文本：

// menu-config.js
export const menuOptionsToContent = [
  { nameKey: 'menu.home', key: 'home' },
  { nameKey: 'menu.setting', key: 'setting' },
  // ...其他菜单项
];

组件中渲染时：

// 组件文件
import intl from 'react-intl-universal';
import { menuOptionsToContent } from './menu-config';

function SideMenu() {
  return (
    <Menu>
      {menuOptionsToContent.map(item => (
        <Menu.Item key={item.key}>
          {intl.get(item.nameKey)}
        </Menu.Item>
      ))}
    </Menu>
  );
}

3. 初始化完成后再生成完整配置 #

如果需要提前生成带文本的配置，可以在intl初始化完成后再处理：

// App.js
import intl from 'react-intl-universal';
import { menuOptionsToContent } from './menu-config';
import { useState, useEffect } from 'react';

function App() {
  const [menuOptions, setMenuOptions] = useState([]);

  useEffect(() => {
    async function initApp() {
      // 先完成intl初始化
      await intl.init({
        currentLocale: 'zh-CN',
        locales: {
          'zh-CN': require('./locales/zh-CN.json'),
          'en-US': require('./locales/en-US.json'),
        },
      });
      // 初始化完成后生成带国际化文本的菜单配置
      const formattedOptions = menuOptionsToContent.map(item => ({
        ...item,
        name: intl.get(item.nameKey)
      }));
      setMenuOptions(formattedOptions);
    }
    initApp();
  }, []);

  return <SideMenu options={menuOptions} />;
}

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