使用react-i18next获取translation.json数组后无法迭代的解决方法

我正在使用react-i18next库，相关代码如下：

import * as i18next from 'react-i18next';
export const translate:t = i18next.useTranslation(); // 该方法可正常处理users.count这类扁平对象（能正确显示数值2）

项目中public/locales/en目录下的translation.json内容为：

{
    "users" : {
        "typeA": [
            { "name": "John", "address": "addressofjohn" },
            { "name": "John", "address": "addressofjohn" }
        ],
        "count": 2
    }
}

我尝试将其中的typeA数组传入组件：

<Component user={translate("users.typeA")} />

但在组件中打印该参数时，控制台输出如下内容，导致无法对其进行循环遍历：

"key 'users.typeA (en-US)' returned an object

已尝试以下两种方式，但均未解决问题：

<Component user={Array.from(translate("users.typeA"))} />
<Component user={JSON.parse(translate("users.typeA"))} />

现咨询如何通过react-i18next从translation.json中获取可迭代的JS数组？

你误用了useTranslation的返回值，useTranslation是React Hook，返回的是包含t翻译函数和i18n实例的对象，不能直接赋值为translate函数。要获取原始数组资源，需通过i18n实例的getResource方法，具体分两种场景处理：

场景1：在函数组件内直接获取 #

import { useTranslation } from 'react-i18next';

function YourComponent() {
  const { i18n } = useTranslation();
  // 直接从i18n实例中获取目标数组
  const userList = i18n.getResource(i18n.language, 'translation', 'users.typeA');
  return <Component user={userList} />;
}

场景2：在非组件文件中获取资源 #

先确保你有单独的i18n配置文件（比如i18n.js）：

// i18n.js 配置示例
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enTranslation from './public/locales/en/translation.json';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: enTranslation }
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: { escapeValue: false }
});

export default i18n;

然后在其他文件中导入该实例获取资源：

import i18n from './i18n';

export const getUserList = () => {
  return i18n.getResource(i18n.language, 'translation', 'users.typeA');
};

之后在组件中调用该函数：

<Component user={getUserList()} />

注意：t函数的设计目的是处理字符串翻译，当传入指向数组/对象的key时，它不会返回原始对象，而是返回提示文本（即你看到的控制台输出），因此必须通过i18n.getResource获取原始资源结构。

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