web-dev-qa-db-ja.com

エラー：レンダリング中にI18nextWithTranslationが中断されましたが、フォールバックUIが指定されていません

I18Nをreact-i18nextを使用して動作させようとしています。私は提供されたステップ here に可能な限り近いものに従っています。私は何時間もグーグルで試してみましたが、まだ自分が間違っていることを発見していません。どんな助けでもありがたいです。

私はこのエラースタックトレースを取得しています：

    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);
reactjsreact-i18next
11
Michael Margozzi

同じ問題が発生し、<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>を使用することです

0
CrsCaballero

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>
  );
}
0
Ilya Iksent