10

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

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

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

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

测试.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 帖子。

4

2 回答 2

10

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

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

  });
于 2020-03-04T10:35:01.320 回答
4

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

i18n
  .init({
  ...
  // react i18next special options (optional)
  react: {
    useSuspense: false,
    wait: false,
  },
});
于 2019-12-24T07:50:47.450 回答