Question

我正在尝试使用react-i18next使I18N正常工作。我正在尽可能接近here所提供的步骤。我已经尝试了几个小时，但仍在使用Google搜索，但还没有发现我在做什么错。任何帮助表示赞赏。

我正在获取此错误堆栈跟踪：

    Exception has occurred: Error
Error: I18nextWithTranslation suspended while rendering, but no fallback UI was specified.

Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.
    in I18nextWithTranslation (created by App)
    in App
    in Router (created by BrowserRouter)
    in BrowserRouter
    in CookiesProvider
    at throwException (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:45969:13)
    at renderRoot (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47147:11)
    at performWorkOnRoot (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48000:7)
    at performWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47912:7)
    at performSyncWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47886:3)
    at requestWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47755:5)
    at scheduleWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47569:5)
    at scheduleRootUpdate (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48230:3)
    at updateContainerAtExpirationTime (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48258:10)
    at updateContainer (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48315:10)

我在最高层有一个具有后备状态的悬念：

import React, { Suspense } from 'react';
import ReactDOM from "react-dom";
import { CookiesProvider } from 'react-cookie';
import App from "./App.js";
import { BrowserRouter } from "react-router-dom";
// import i18n (needs to be bundled ;)) 
import './i18n';

ReactDOM.render(
  <CookiesProvider>
    <BrowserRouter basename="/cgadmin-react-primeng/">
      <Suspense fallback={<Loader />}>
        <App />
      </Suspense>
    </BrowserRouter>
  </CookiesProvider>, 
  document.getElementById("root")
);

const Loader = () => (
  <div>loading...</div>
);

我没有使用钩子，而是建议将HOC推荐用于App类中的类，如下所示：

export default withTranslation()(App);

Answer 1

默认情况下，useSuspense设置为true，因此React需要后备UI。将useSuspense设置为false将解决您的问题，因为React不再需要后备UI。

i18n
    .init({
        react: {
            useSuspense: false
        }
    });

Answer 2

您能否提供有关错误情况的更具体示例？我已经在沙盒（https://codesandbox.io/s/10j2xw6j3）中尝试了最好的模拟方法，但是无法重现这种情况。

p.s。这应该在注释中添加，但是stackoverflow阻止新用户这样做。所以我在这里发布并稍后编辑

Answer 3

我遇到了同样的问题，并且已经解决了将渲染包装在<Suspense>上的问题，您可以在https://reactjs.org/docs/react-api.html#reactsuspense处找到更多信息

i18next在其文档https://react.i18next.com/latest/using-with-hooks#translate-your-content

中也说过同样的话

-

也

i18n
    .init({
        react: {
            useSuspense: false
        }
    });

先前的代码有效，但留下了很多警告，最好的方法是使用<Suspense>

Answer 4

只是一个疯狂的猜测，可能是因为您要在使用之后定义Loader 吗？

Answer 5

如果您使用的是XHR（i18next-xhr-backend），则需要将您的应用包装到Suspense组件中：

import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t, i18n } = useTranslation();

  return <h1>{t('Welcome to React')}</h1>
}

// i18n translations might still be loaded by the xhr backend
// use react's Suspense
export default function App() {
  return (
    <Suspense fallback="loading">
      <MyComponent />
    </Suspense>
  );
}

错误：I18nextWithTranslation在渲染时挂起，但未指定后备UI

5 个答案: