如何在react-i18next中解析对象列表并实现渲染？

数据老陈

2026-5-7

解决React-i18next中翻译列表无法渲染的问题

这个问题很常见——根源在于i18next的t函数默认会把所有返回值转换成字符串，哪怕你的翻译资源是数组，它也会把数组转成用逗号分隔的字符串（比如"Test1,Test2,Test3,Test4"）。而字符串是没有.map()方法的，所以你的代码会报错。

下面给你两种可行的解决方法：

方法1：调用`t`函数时传入`returnObjects`选项

在获取数组类型的翻译项时，显式告诉i18next要返回原始的数组对象，而不是转成字符串：

const [t] = useTranslation("main");
// some code
<ul>
  {t('topPart.list', { returnObjects: true }).map((item, index) => {
    return(
      <li key={index}>{item}</li>
    )
  })}
</ul>

这个方法适合只在少数地方需要获取数组/对象类型翻译的场景，不会影响全局的t函数行为。

方法2：全局配置`returnObjects`

如果你的项目中有很多数组/对象类型的翻译资源，可以在i18next初始化的时候全局开启returnObjects选项，这样所有t函数调用都会默认返回原始的对象/数组：

// 你的i18n初始化文件（比如i18n.js）
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        main: {
          topPart: {
            title: "Hello",
            list: [ "Test1", "Test2", "Test3", "Test4" ]
          }
        }
      }
    },
    lng: 'en',
    fallbackLng: 'en',
    returnObjects: true, // 全局开启返回对象/数组
    interpolation: {
      escapeValue: false // React已经内置了XSS防护，这里可以关闭
    }
  });

export default i18n;