i18next 后端 loadPath 无法映射数据

Question

我正在尝试使用 i18next、react-i18next 和 axios 从第三方加载翻译。这是我的 i18n.js:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { DateTime } from "luxon";
import Backend from "i18next-http-backend";
import axios from "axios";

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: true,
    fallbackLng: "en",
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
      format: (value, format, lng) => {
        if (value instanceof Date) {
          return DateTime.fromJSDate(value)
            .setLocale(lng)
            .toLocaleString(DateTime[format]);
        }
        return value;
      },
    },
    backend: {
      loadPath: (lng) => {
        axios.get(`http://localhost:5000/${lng}`).then((res) => {
          console.log(JSON.stringify(res.data));
          return JSON.stringify(res.data);
        });
      },
    },
  });

export default i18n;

我可以在控制台上看到数据即将到来，但 useTranslation() 无论如何都不起作用。知道为什么会这样吗？

Answer 1

loadPath 函数只是用来获取要加载的路径，而不是实际的加载请求。

为此，请使用请求选项：

https://github.com/i18next/i18next-http-backend#backend-options

尝试这样的事情：

// ...
loadPath: `http://localhost:5000/{{lng}}',
request: function (options, url, payload, callback) {
  axios.get(url).then((res) => {
      callback(null, { status: 200, data: res.data });
  }).catch((err) => callback(err));
},
// ...

这里还可以找到请求选项的专用测试：https://github.com/i18next/i18next-http-backend/blob/master/test/http.spec.js#L178

i18next 后端 loadPath 无法映射数据

i18next backend loadPath fails to map the data

i18next

react-i18next

i18next-http-backend