i18next国际化问题：API/data.js数据的多语言切换方案咨询

你遇到的核心问题是：useTranslation是React Hook，只能在React组件或自定义Hook中调用，普通的JS模块（比如你的data.js）不属于React组件上下文，直接调用t函数会失效或报错。下面是几种实用的解决方案：

方案1：本地data.js存储翻译key，组件渲染时转换（推荐） #

把data.js里的多语言文本换成对应的翻译key，不要直接调用t函数，等到React组件渲染时再用t函数解析。

修改后的data.js #

const data = [
    {
        id: 1,
        titleKey: 'singleCard.0.title',
        categoryKey: 'singleCard.0.category',
        price: 15.99,
        img: '../images/item-1.jpeg',
        descKey: 'singleCard.0.desc',
    },
    {
        id: 2,
        titleKey: 'singleCard.1.title',
        categoryKey: 'singleCard.1.category',
        price: 13.99,
        img: '../images/item-2.jpeg',
        descKey: 'singleCard.1.desc',
    },
    // 其他数据项同理替换
];

export default data;

在React组件中渲染 #

import { useTranslation } from "react-i18next";
import data from './data.js';

function ItemList() {
    const { t } = useTranslation();

    return (
        <div className="item-list">
            {data.map(item => (
                <div key={item.id} className="item-card">
                    <h3>{t(item.titleKey)}</h3>
                    <p>{t(item.categoryKey)}</p>
                    <p>${item.price}</p>
                    <img src={item.img} alt={t(item.titleKey)} />
                    <p>{t(item.descKey)}</p>
                </div>
            ))}
        </div>
    );
}

export default ItemList;

语言切换时，组件会自动重新渲染，t函数会读取当前语言的对应翻译值，完美适配状态变化。

方案2：API返回数据的处理 #

根据API返回的格式不同，分两种情况处理：

情况A：API返回翻译key #

和本地data.js的处理逻辑一致，在组件中用t函数解析key即可。

情况B：API返回多语言对象 #

如果API直接返回包含多语言的结构（比如{en: "xxx", zh: "xxx"}），可以通过i18n.language获取当前语言，直接取值：

import { useTranslation } from "react-i18next";
import { useEffect, useState } from "react";

function ItemList() {
    const { i18n } = useTranslation();
    const [items, setItems] = useState([]);

    useEffect(() => {
        // 模拟API请求
        fetch('/api/items')
            .then(res => res.json())
            .then(data => setItems(data));
    }, []);

    return (
        <div className="item-list">
            {items.map(item => (
                <div key={item.id} className="item-card">
                    {/* 优先取当前语言， fallback到英文 */}
                    <h3>{item.title[i18n.language] || item.title.en}</h3>
                    <p>{item.category[i18n.language] || item.category.en}</p>
                    {/* 其他字段渲染 */}
                </div>
            ))}
        </div>
    );
}

方案3：非组件模块直接使用i18n实例（不推荐） #

如果一定要在普通JS模块中处理翻译，可以直接导入i18n配置实例调用t函数，但注意这种方式不会自动响应语言切换，需要手动监听更新：

data.js封装成生成函数 #

import i18n from './i18n'; // 导入你的i18n配置文件

export function generateData() {
    return [
        {
            id: 1,
            title: i18n.t('singleCard.0.title'),
            category: i18n.t('singleCard.0.category'),
            price: 15.99,
            img: '../images/item-1.jpeg',
            desc: i18n.t('singleCard.0.desc'),
        },
        // 其他数据项
    ];
}

组件中监听语言变化更新数据 #

import { useTranslation } from "react-i18next";
import { useEffect, useState } from "react";
import { generateData } from './data.js';

function ItemList() {
    const { i18n } = useTranslation();
    const [items, setItems] = useState([]);

    useEffect(() => {
        // 语言切换时重新生成数据
        setItems(generateData());
    }, [i18n.language]);

    // 渲染逻辑...
}

这种方式需要手动维护数据更新，不如方案1简洁，仅适合特殊场景。

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