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

【问题标题】：How to fix useTranslation error in react-i18next如何修复 react-i18next 中的 useTranslation 错误
【发布时间】：2021-10-30 19:51:57
【问题描述】：

我的错误边界使用 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，但是，删除它不是解决方案。

【问题讨论】：

标签： reactjs internationalization i18next react-i18next react-error-boundary

【解决方案1】：

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

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

关注link 了解更多详情。

【讨论】：