移动端项目中如何在静态文件用i18next实现多语言菜单

在移动端项目中使用i18next和Redux Toolkit，现有静态菜单列表数据：

const menuListData = [
 {
      id: 1,
      titleT: 'title1',          
  },
  {
      id: 2,
      titleT: 'title2',   
  },  
];
export default menuListData;

同时有多语言文件，例如英文版本：

export default en = { // 还有其他语言版本
    translation: { 
      "title1": 'Title 1', 
      "title2": 'Title 2', 
    }
}

尝试在静态文件中直接使用i18n翻译时出现错误，错误代码如下：

import { useDispatch, useSelector } from "react-redux";
import React from "react";

const MenuList = (props) => {
    const i18n = useSelector((state) => state.langStore.i18n);
}
const titleTranslate = (metin) => {
    const i18n = useSelector((state) => state.langStore.i18n);
    return i18n.t(metin);
}
const menuListData = [
    {
        id: 1,
        titleT: i18n.t('title2'),
    },
    {
        id: 2,
        titleT: i18n.t('title2'),
    },
];
export default menuListData;

请问如何实现静态文件中菜单数据的i18n多语言翻译？

1. 违反React Hook规则：useSelector是React Hook，只能在React组件函数或自定义Hook的顶层作用域中调用，不能在普通函数（如titleTranslate）或组件外的静态数组初始化逻辑中使用。
2. 实例未初始化：静态数组menuListData在模块加载阶段就会执行初始化，此时还无法从Redux store中获取到有效的i18n实例，直接调用i18n.t会导致未定义错误。

通过将菜单数据的生成逻辑封装为工厂函数，在组件内部传入翻译函数的方式实现：

1. 创建菜单数据工厂函数文件：

const getMenuListData = (t) => [  
  {
    id: 1,
    titleT: t('title1'), 
  },
  {
    id: 2,
    titleT: t('title2'),  
  },    
];

export const data = getMenuListData; 

2. 在组件中调用工厂函数并传入i18n.t：

import { data } from "./menuListData";

// 在组件函数内部
const i18n = useSelector((state) => state.langStore.i18n);
const menuData = data(i18n.t);

该方法将翻译逻辑延迟到组件渲染阶段执行，此时能确保获取到有效的i18n实例，同时符合React Hook的使用规则，可正常实现多语言翻译。

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