如何更新i18next配置？

Question

我想在我的项目中使用react-i18next，我想用从server提取的数据来配置i18设置，所以这是一个异步功能。

我想到的第一个Senario正在使用它：

  useEffect(() => {
    console.log("i18n_useEffect", i18n);
    setTimeout(function() {
      console.log(
        "fetch data from server,and then reset i18n.js configuration"
      );
      const configurationFromServer = {...};
      localStorage.setItem("i18n_configuration",configurationFromServer)
      seti18nLoaded(true);
    }, 3000);
  },[]);

seti18nLoaded && <Componenrts/>

首先，我们从服务器获取配置数据，完成后，我们可以在内部播放并使用i18n。

但它看起来不正确，因为如果配置api失败或在我获取数据之前。我想先提供默认设置，然后再更新。

像这样：

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";

const init_i18n = configFromServer => {
  i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init(configFromServer);
};

const defaultConfig = {
  // we init with resources
  resources: {},
  fallbackLng: "en",
  debug: true,
  // have a common namespace used around the full app
  ns: ["translations"],
  defaultNS: "translations",

  keySeparator: false, // we use content as keys

  interpolation: {
    escapeValue: false
  }
};

const configFromServer = {
  // we init with resources
  resources: {
    en: {
      translations: {
        Hello: "Hello",
        welcome: "welcome",
        "Use string as key": "Use string as key"
      }
    },
    de: {
      translations: {
        "Use string as key": "Use string as key_de",
        Hello: "Hello_de",
        welcome: "welcome_de"
      }
    }
  },
  fallbackLng: "en",
  debug: true,

  // have a common namespace used around the full app
  ns: ["translations"],
  defaultNS: "translations",

  keySeparator: false, // we use content as keys

  interpolation: {
    escapeValue: false
  }
};

const initialize = () => {
  i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init(defaultConfig);

  setTimeout(() => {
    console.log("fetch data from server");
    //I want update the configuration here.but not work.
    init_i18n(configFromServer);
  }, 2000);
};

initialize();

export default i18n;

因此，想法是我们使用默认配置将其初始化一次，然后根据从服务器提取的数据对其进行更新

并且我将使用以下方式，因为我希望它在从服务器加载或获取失败的i18next配置之前默认显示英文文本。

我不确定我的想法是否正确。我也看了一下i18next-xhr-backend，它在init函数中配置了api路径，但是很难理解，如果有人可以举一个使用i18next-xhr-backend的例子，那将是非常有帮助的。

无论如何，我在这里有一个在线演示来更清楚地解释它：https://codesandbox.io/s/react-i18next-gpzyc

并且我有一个fack api来测试配置：https://my-json-server.typicode.com/jjzjx118/demo/db

返回：

{
  "en": {
    "translations": {
      "Hello": "Hello",
      "welcome": "welcome",
      "Use string as key": "Use string as key"
    }
  },
  "de": {
    "translations": {
      "Use string as key": "Use string as key_de",
      "Hello": "Hello_de",
      "welcome": "welcome_de"
    }
  }
}

谢谢。

Answer 1

我已经检查了您的沙盒链接，并且已经从新配置中重新初始化了i18n实例。您所缺少的是手动选择您喜欢的语言。

由于正在使用LanguageDetector，它将仅基于浏览器等选择语言。如果要在从服务器获取请求后手动更改语言，则可以在重新初始化之后调用i18n.changeLanguage("de")。

根据您的情况：

setTimeout(() => {
    console.log("fetch data from server");
    init_i18n(configFromServer);

    // You can change the language here based on the config
    i18n.changeLanguage("de");
  }, 2000);

这是一个工作中的沙箱https://codesandbox.io/s/react-i18next-we8xi