如何升級 i18next 配置？

Question

我想在我的項目中使用 react-i18next，並且我想使用從服務器獲取的數據來配置 i18 設置，所以它是一個異步 function。

我想到的第一個 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 function 中配置了 api 路徑，但是很難理解，如果有人可以舉一個使用 i18next-xhr 的示例，將會很有幫助- .

反正我這里有一個在線demo可以解釋的更清楚： 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 ，它只會 select 基於瀏覽器的語言等。如果您想在從服務器獲取請求后手動更改它，您可以在重新初始化后調用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