20

我正在尝试使用 react-i18next 让 I18N 工作。我正在尽可能接近此处提供的步骤。我已经尝试了几个小时，进行了大量的谷歌搜索，但还没有发现我做错了什么。任何帮助表示赞赏。

我收到此错误堆栈跟踪：

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

5 回答 5

27

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

i18n
    .init({
        react: {
            useSuspense: false
        }
    });
于 2019-11-02T16:05:45.330 回答
6

我有同样的问题，我已经解决了我的渲染包装<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>

于 2020-03-11T18:00:43.217 回答
2

你能提供一个关于错误情况的更具体的例子吗？我已经在沙箱（https://codesandbox.io/s/10j2xw6j3）中尝试了我最好的模拟，但我无法重现这种情况。

ps 这应该在评论中添加，但stackoverflow 阻止新用户这样做。所以我在这里发布并稍后编辑

于 2019-03-02T00:48:31.817 回答
0

如果您使用的是 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>
  );
}
于 2020-02-14T09:58:00.087 回答
0

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

于 2019-03-04T18:12:05.530 回答