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

Question

我的error边界使用来自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

你不能在类组件中使用react钩子。

但是，您可以创建即席以将转换转发到错误边界组件。

有关如何执行此操作的更多详细信息，请参阅此link。