React中如何用Axios结合i18next翻译REST API返回内容？

我几乎试遍了StackOverflow上的所有方案，都没效果。我想要在获取REST API数据后对内容进行翻译，以下是相关代码片段：

i18n.js:

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

const loadResources = async (locale) => {
  return await axios
    .get("https://jsonplaceholder.typicode.com/posts", {
      params: { lang: locale },
    })
    .then((res) => {
      return res.data.slice(0, 3);
    })
    .catch((err) => {
      console.log(err);
    });
};

const detectorOptions = {
  order: ["cookie", "localStorage", "navigator"],

  lookupCookie: "locales",
  lookupLocalStorage: "locales",

  caches: ["localStorage", "cookie"],
  excludeCacheFor: ["cimode"],
  checkWhiteList: true,
};

const backendOptions = {
  loadPath: "/locales/{{lng}}/{{ns}}.json", //used to pass language and namespace to custom XHR function
  request: (options, url, payload, callback) => {
    try {
      const [lng] = url.split("|");

      loadResources(lng).then((data) => {
        callback(null, {
          data: JSON.stringify(data),
          status: 200, //status code is required by XHR plugin to determine success or failure
        });
      });
    } catch (e) {
      console.error(e);
      callback(null, {
        status: 500,
      });
    }
  },
};

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: true,
    fallbackLng: "en",
    backend: {
      loadPath: "/locales/{{lng}}/{{ns}}",
    },
    detection: detectorOptions,
    whitelist: ["en", "zh", "jp", "fr"],
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

Demo.js

import { useTranslation } from "react-i18next";
import axios from "axios";
import { useEffect, useState } from "react";

export default function Demo() {
  const { t } = useTranslation();
  const [data, setData] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((res) => {
        setData(res.data.slice(0, 3));
      })
      .catch((err) => {
        console.log(err);
      });
}, [data]);


return (
    <>
    <section>
        {data.map((i, index) => {
          return (
            <>
              <div key={index}>
                <h4>{i.title}</h4>
                <p>{i.body}</p>
              </div>
            </>
          );
        })}
      </section>
   </>
)

我知道i18next-http-backend用于加载翻译资源，但不清楚如何通过Axios从REST API加载翻译内容。我尝试过以下方案，但都没有帮助：

• 如何在React-i18next中加载API响应数据作为翻译？
• 如何通过API调用加载翻译而非静态JSON？在React-i18next中怎么实现？
• 如何在Next-i18next中从API端点正确加载i18n资源？（此为Next.js相关方案）

我的locales文件位于public文件夹下的public\locales\{lng}.json，还找到一个GitHub issue但链接已失效。

从昨天开始我就找不到解决方法，非常困惑，恳请帮助！

内容的提问来源于stack exchange，提问作者user