렌더링하는 동안 React 구성 요소가 일시 중단되었지만 폴백 UI가 지정되지 않았습니다.

렌더링하는 동안 React 구성 요소가 일시 중단되었지만 폴백 UI가 지정되지 않았습니다.

나는 이 새로운 리액트 앱을 막 시작했다.

사용하고 있었습니다.<Suspense />컴포넌트에 있는 엘리먼트를 제거했습니다.그 후, 애플리케이션이 크래쉬 해, 상기의 에러가 발생합니다.

에 대해 너무 잘 모르면서 쉽게 해결할 수 있는 방법이 없을까요?<Suspense />?

넌 두가지 옵션이 있다 :

1. 서스펜스를 사용하지 않고 i18n.js를 다음과 같이 설정할 수 있습니다.

   i18n
     .use(XHR)
     .use(LanguageDetector)
     .init({
       react: { 
         useSuspense: false //   <---- this will do the magic
       }
   });
   

2. 서스펜스 사용 예:

   <Suspense fallback={<div>Loading... </div>}>
         <App />
   </Suspense>

이 문제를 해결하려면Suspense를 다시 입력해 주세요.사용법을 삭제해야 합니다.

@IsanPatel의 문제는 아니지만 이 오류 메시지의 원인이 되는 것은 useTranslation()과 같은 후크를 함수 홀딩 내에서 직접 사용하는 경우입니다.<Suspense />해결책은 코드를 다른 함수로 이동하고 거기에 훅을 두는 것입니다(스크린샷 참조).

이것은 구글에서 처음 나왔고, 누군가가 해결책을 찾는데 오랜 시간을 낭비할 수 있기 때문에 나는 그것을 코멘트로 공유하고 싶었다.

삭제 중React.lazy좋은 생각이 아니야어플리케이션이 커지면 홈페이지 로딩에 시간이 많이 걸리기 때문입니다.

react-router v6+에는 다음과 같은 기능이 있습니다.

<Route path="about" element={
  <React.Suspense fallback={<>...</>}>
    <About />
  </React.Suspense>
} />

우리가 저지르기 쉬운 한 가지 오류:

// Error: In the fallback component, don't use i18n!
// <Suspense fallback={<div>{t('loading')}... </div>}>

// This is correct
<Suspense fallback={<div>Loading... </div>}>
  <App />
</Suspense>

그리고 잊지 마세요fallback을 지탱하다.Suspense컴포넌트 - 컴포넌트가 없으면 동작하지 않습니다.

언급URL : https://stackoverflow.com/questions/54432861/a-react-component-suspended-while-rendering-but-no-fallback-ui-was-specified