如何修复 react-i18next 中的 useTranslation 错误

Question

我的错误边界使用 i18next 的 useTranslation 钩子捕获了错误。由于该错误边界，我无法获得正确的错误文本。刚收到类似“以上错误发生在...”的文本。你能告诉我为什么会这样吗？

此行的问题：

const {t} = useTranslation();

i18 配置：

import i18next from "i18next";
import {initReactI18next} from "react-i18next";
import HttpApi from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";

export const ns = ["translation", "notification", "form", "modal", "table", "plans"];

i18next
  .use(initReactI18next)
  .use(HttpApi)
  .use(LanguageDetector)
  .init({
    supportedLngs: ["en", "ru"],
    fallbackLng: "en",
    nonExplicitSupportedLngs: false,
    cleanCode: true,
    ns: ns,
    debug: process.env.NODE_ENV === "development",
    interpolation: {
      format: function (value, format) {
        if (format === "uppercase") return value.toUpperCase();
        if (format === "lowercase") return value.toLowerCase();
      }
    }
  });

export default i18next;

我在错误边界中使用了 useTranslation，但是删除它不是解决方案。

Answer 1

您不能在 class 组件内使用反应挂钩。

但是，您可以创建 HOC 以将翻译转发到错误边界组件。

按照此 link 了解有关如何执行此操作的更多详细信息。

如何修复 react-i18next 中的 useTranslation 错误

How to fix useTranslation error in react-i18next

internationalization

i18next

reactjs

react-i18next

react-error-boundary