{ useTranslation } 来自 "react-i18next" 库输出错误

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>
);
};