Question

我有以下代码：

import React, { Suspense } from "react";
import { useTranslation } from "react-i18next";
import "../i18n";
const Loader = () => {
  return (
    <div>
      <h3>loading...</h3>
    </div>
  );
};
export default props => {
  const { t } = useTranslation(); //the problem is in this line

  return (
    <Suspense fallback={<Loader />}>
        <h1>{t("testTitle")}</h1>
    </Suspense>
  );
};

但是它不起作用。而是显示一个带有以下文本的红屏：一个React组件在渲染时挂起，但未指定后备UI。在树的上方添加一个组件，以提供要显示的加载指示器或占位符

一开始，我认为问题出在<Suspense fallback={<Loader/>}>行，但是经过几次尝试，我发现问题实际上是在useTranslation()行出现的。

我该如何解决？

Answer 1

我发现了引起问题的原因：尽管useTranslation()行位于默认组件内，但不在<Suspense fallback={<Loader />}>范围内。因此，解决方案是不导出该组件。相反，您必须将其分配给变量，然后创建一个将其包装的新组件：

import React, { Suspense } from "react";
import { useTranslation } from "react-i18next";
import "../i18n";
const Loader = () => {
  return (
    <div>
      <h3>loading...</h3>
    </div>
  );
};
const FirstComponent = props => { //You assign it into a varible instead of exporting directly

  const { t } = useTranslation(); 

  return (
    <Suspense fallback={<Loader />}>
        <h1>{t("testTitle")}</h1>
    </Suspense>
  );
};

export default props => { //This is the component that you have to export instead

  return (
    <Suspense fallback={<Loader />}>
        <FirstComponent/>
    </Suspense>
  );
};

来自“ react-i18next”库的{useTranslation}输出错误

1 个答案: