React i18n组件外翻译Questions数组prompt 初始化不渲染如何解决？

你的代码核心问题是Questions数组在i18n实例初始化完成前就已经提前执行t函数计算了prompt字段的值，此时翻译资源还未加载完成，因此只能拿到原始的翻译key而非翻译内容。此外静态数组初始化后值就固定了，后续切换语言也不会自动更新翻译。

方案1（最推荐）：将静态数组改为函数返回，动态计算翻译 #

这种方式可以保证每次拿数组时都是调用当前最新的翻译结果，同时支持切换语言后自动更新：

import i18n from "i18next";

// 改为返回数组的函数，调用时才会执行翻译逻辑
export const getQuestions = () => [
  {
    // 注意你原有代码中字段名为promp，疑似拼写错误，需和你实际使用的字段名保持一致
    prompt: i18n.t("translation1"),
    type: "A",
    type2: "AC",
  },
  {
    prompt: i18n.t("translation2"),
    type: "A",
    type2: "AB",
  },
]

使用时直接调用getQuestions()获取数组即可，需要确保调用时i18n已经完成初始化。

方案2：数组内存储翻译key，使用时再翻译 #

如果你需要保持静态数组的结构，可以只在数组里存翻译key，在实际使用的位置再调用t函数翻译：

// 数组内仅存储翻译key，不提前执行翻译
export const Questions = [
  {
    promptKey: "translation1",
    type: "A",
    type2: "AC",
  },
  {
    promptKey: "translation2",
    type: "A",
    type2: "AB",
  },
]

在组件或其他逻辑中使用时，执行i18n.t(question.promptKey)即可拿到对应翻译内容。如果是在React组件内使用，推荐搭配react-i18next的useTranslation钩子获取t函数，会自动监听语言变化触发重渲染。

内容的提问来源于stack exchange，提问作者Çağın Berke İspir