logo标签列表

如何使用hooks在react i18next中修复“未指定回退UI”问题

reactjsreact-hooksreact-i18nextreact-suspense
12

我正在尝试在我的React组件中使用useTranslation hook实现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;

我已经查看了所有能找到的文档，以及这篇不涉及我的问题的SO帖子。

你在哪个组件上使用了 Lazy？ - Shubham Khatri
文档中没有展示如何使用 Lazy，但是添加以下代码： const { t, i18n } = lazy(() => useTranslation( 'bingo_game' )); 似乎可以解决这个问题，但在更复杂的组件中可能不适用 - 这是正确的做法吗？ - Micah Gideon Modell
4个回答
10

在您的i18n文件中添加以下内容，它将完成魔法 :) 

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

  });
1
这与之前的答案相似，但我仍不想禁用Suspense。最终，我通过将所有组件包装在一种类似于Suspense的包装器中来解决了这个问题。我认为长远来看，我可能想要转移到React Router选项之一... - Micah Gideon Modell
是的，它确实如此。 - Noman
4

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

i18n
  .init({
  ...
  // react i18next special options (optional)
  react: {
    useSuspense: false,
    wait: false,
  },
});
5
我试过那个方法并且它起作用了，但我不想禁用这个功能，我希望它能正常工作。 - Micah Gideon Modell
在某个时候，您可能想要向项目添加测试，但是suspense与它们无法正常工作。 - Travnikov.dev
你能进一步解释一下吗(@travinkov)？我的应用程序在Rails端有一系列测试，而一些策略性的try/catch(或者Rails的等效语句-我忘了)和sleep语句似乎已经处理了所有问题。还有其他需要关注的事情吗？ - Micah Gideon Modell
1

使用useSuspense: false是可以的，但在这种情况下，您需要同时使用ready state，否则您的翻译键会出现在界面上，直到i18next准备就绪...类似于这样：

const { t, i18n, ready } = useTranslation()

在渲染部分：

{ready && (<SampleComponent />)}
这很有道理，我没有意识到他们已经准备好了。实际上，我已经重新设计了系统，以便这不再是一个问题，但如果以后需要（可能会），我会测试一下。 - Micah Gideon Modell
1
1
我喜欢这个可以按照每个案例来操作，谢谢。这很有帮助，与下面的其他方案不同，但最终，我认为这更多是一个悬而未决的架构问题。我最终重新设计了我的前端来解决这个问题，现在对我来说已经不再是问题了 - 这也是我无法将其标记为已解决的另一个原因。抱歉。 - Micah Gideon Modell
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接