反应。从服务器获取数据并将其连接到 i18n答案

【问题标题】：Reactjs. Fetch data from server and connect it to i18n反应。从服务器获取数据并将其连接到 i18n
【发布时间】：2020-01-29 16:42:04
【问题描述】：

我不明白如何将数组中的动态内容集成到 i18n。

假设服务器返回一些数据，一个待办事项数组：

const todos = [
  {
    id: 1,
    isChecked: true,
    i18n: [
      { id: 1, languageId: 1, title: "Take a nap" },
      { id: 2, languageId: 2, title: "Zdrzemnąć się" }
    ]
  },
  {
    id: 2,
    isChecked: false,
    i18n: [
      { id: 3, languageId: 1, title: "Make dinner" },
      { id: 4, languageId: 2, title: "Zrobić obiad" }
    ]
  }
]

每个待办事项对象已经拥有所有翻译数据，因此它不是在 JSON 文件中。

现在在我的render() 函数中，我渲染了我的待办事项，我想通过使用i18next 框架来显示每个待办事项的title。

是否可以通过i18n 的力量实现这一目标？（反应-i18next）也许官方文档中有一些例子？我不确定我能否自己解决这个问题。

【问题讨论】：

如果服务器返回所有翻译，为什么还要使用库呢？您可以很好地创建自己的自定义实用程序。
我可以，但是假设我的项目已经在使用i18n 来管理所有静态内容。所以我在想......如果一切都从一个地方（一个图书馆）管理会不会更好？这不是更好的方法吗？
我不知道我理解你的例子。您的 2 个任务有 2 个不同的 ids，并且似乎使用 2 种不同的语言。但是，它们具有相同的languageId。这是故意的吗？
哦，谢谢指出。是的，languageId 是个错误。我已经更新了代码。
i18next 使用每种语言的键和值，您可以按语言对数据进行分组，添加键，并将 i18next.addResourceBundle 使用到“特殊”命名空间中，比如说动态，然后在你的 React 组件中使用命名空间和正确的键

标签： javascript reactjs i18next react-i18next

【解决方案1】：

在我的情况下，感谢@technophyle，我将使用我自己的工具。

这是快速代码示例：

const template = { title: '' };

get text() {
    const text = todos.find(t =>
        t.languageId === App.Lang.id;

    if (!text)
        return template;
    return { ...template, ...text };
 }

i18next.addResourceBundle 的提议使用对我来说似乎有点不知所措，因为它需要对数组进行大量解析。

但总的来说，如果项目已经使用i18n 来管理静态事务，我认为不应该这样做。 i18n 有一些很酷的功能，比如检测默认语言，就我而言，我无法使用它，我需要在我的项目中维护两个不同的翻译系统：i18n 和我自己的 util for处理动态翻译。

【讨论】：