标题重写为：React 및 TypeScript를 사용하여 Vite에서 동적 구성 요소 가져오기로 인해 빠른 새로 고침이 실패함

Question

다단계 양식을 만들려고 하는데 이와 같은 상수에 대한 데이터를 별도의 파일에 넣습니다

"반응"에서 {lazy}를 가져옵니다. 으아악

컨텍스트의 맞춤 후크에 전달합니다

으아악

맞춤 후크입니다

으아악

여기에서는 동적 구성요소를 사용하고 있습니다

으아악

제 VITE 구성은 이렇습니다

으아악

모든 것을 시도한 후에도 첫 번째 렌더링이 아닌 구성 요소를 다시 로드할 때 여전히 이 오류가 발생합니다

App.tsx:7 Uncaught TypeError: 'data'의 'currentStep' 속성이 null이므로 구조 해제할 수 없습니다. 애플리케이션에서(App.tsx:7:11) renderWithHooks에서(react-dom.development.js:16305:18) mountInminatingComponent(react-dom.development.js:20074:13) 작업 시작 시 (react-dom.development.js:21587:16) HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14) Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16) InvokeGuardedCallback(react-dom.development.js:4277:31) BeginWork$1(react-dom.development.js:27451:7)에 있습니다. PerformUnitOfWork(react-dom.development.js:26557:12) LoopSync 작업 중 (react-dom.development.js:26466:5)

상태가 손실되고

에 대한 정보가 손실되기 때문에 구성 요소만으로 전체 페이지를 로드하는 것과 같기 때문에 이것이 HRM 문제라고 생각합니다. 하지만 작동하게 만드는 방법을 찾을 수 없습니다. 도와주세요, 가르쳐 주세요. 내가 하고 싶은 일을 성취하는 더 나은 방법 useMultisteps

Answer 1

구성 요소를 업데이트하면 상태가 손실되는 것 같습니다(아마도 데이터가 준비되기 전에 useApp() 후크가 반환되기 때문일 것입니다 null).

1. React memo()에 상태 저장 구성 요소를 래핑해 보세요. 이렇게 하면 HMR 업데이트 중에 구성 요소 상태가 유지됩니다.

예: useApp 후크를 useMemo 후크로 감싸서 한 번만 호출되도록 합니다.

으아악

요약하자면, 이는 HMR로 인해 구성 요소가 다시 렌더링되더라도 useApp 후크가 한 번만 호출되고 반환 값이 기억되도록 보장합니다.

2. 두 번째 제안: 다음과 같이 코드를 수정해 보세요.

   const { currentStep, 다음, 뒤로, isFirst } = 데이터

이렇게 하면 데이터 객체가 null이 아닌 경우에만 구조 분해 작업이 발생합니다.