如何使用钩子在反应 i18next 中修复“未指定回退 UI”

Posted 2023-02-21

【中文标题】如何使用钩子在反应 i18next 中修复“未指定回退 UI”

【英文标题】：How to fix 'no fallback UI was specified' in react i18next using hooks

【发布时间】：2020-04-15 07:21:36

【问题描述】：

我正在尝试使用 useTranslation 挂钩在我的反应组件中实现 i18next，但它一直说：

未捕获的错误：渲染时暂停测试，但未指定回退 UI。

在树的较高位置添加一个<Suspense fallback=...> 组件，以提供加载指示器或占位符来显示。

如何将<Suspense> 添加到比我所拥有的更高的位置？我究竟做错了什么？我该如何解决？当我使用 <Translation> 组件时，它似乎工作正常。当然，如果我关闭 Suspense 并尝试自己处理它似乎也可以正常工作，但我认为这有点违背目的。我怎样才能使它真正起作用？我的 Fetch 后端是否配置错误？

Test.js

import React,  Suspense, useState, useEffect, lazy  from "react";
import PropTypes from "prop-types";

import i18n from './i18n';
import  useTranslation  from 'react-i18next';

export default function Test( props )
  const  t, i18n  = useTranslation( 'bingo_game' );

    return (
    <Suspense fallback=<div>Loading...</div>>
      <div>
        Pant leg
      </div>
    </Suspense>
    )


Test.propTypes = 
  token: PropTypes.string.isRequired,
;

和

i18n.js

import i18n from "i18next";
import LngDetector from "i18next-browser-languagedetector";
import  initReactI18next  from "react-i18next";

import Fetch from "i18next-fetch-backend";

  i18n
    .use(LngDetector) //language detector
    .use(Fetch)
    .use(initReactI18next)
    .init(
      backend: 
        loadPath: "/infra/locales/ns.json",
        // path to post missing resources
        addPath: "locales/add/ns",
        // define how to stringify the data when adding missing resources
        stringify: JSON.stringify
      ,
      defaultNS: "base",
      fallbackLng: "en",
      debug: true,
      initImmediate: false
    );

export default i18n;

我已经查看了我可以找到的文档以及 this SO post that is not my issue。

【问题讨论】：

你在哪个组件上使用 Lazy？

docs 没有显示Lazy 的使用，但添加了这个：const t, i18n = lazy(() => useTranslation( 'bingo_game' )); 似乎在这里修复它，但不是在更复杂的组件中 - 这应该是这样吗完成了吗？

【参考方案1】：

在你的i18n 文件中添加这个，它会变魔术:)

.init(
   react: 
     useSuspense: false,
     ...

  );

【讨论】：

这与之前的答案非常相似，但我仍然不急于禁用 Suspense。最终，我通过将所有组件包装在一种 Suspense 包装器中解决了这个问题。我认为从长远来看，我可能想要的是转移到 React Router 选项之一......

是的，确实如此

【参考方案2】：

这不是最好的方法，但我可以建议您通过将此行添加到您的配置来关闭悬念

i18n
  .init(
  ...
  // react i18next special options (optional)
  react: 
    useSuspense: false,
    wait: false,
  ,
);

【讨论】：

是的，我试过了，它工作了，但我不想禁用该功能，我希望它正常工作。

在某些时候你会想要在你的项目中添加测试，但 suspense 不能正常工作

您能否进一步解释一下（@travinkov）？我在我的应用程序的 rails 端进行了一系列测试，还有一些战略性的 try/catch（或等效的 rails - 我忘了）和 sleep 语句似乎正在处理迄今为止的所有事情。我还有什么需要注意的吗？