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

Question

다단계 양식을 만들려고 하는데 import{lazy} from 'react';exportconststeps=[{id:0,name:'PersonalInfo',comComponent)와 같은 상수에 대해 별도의 파일에 데이터를 저장하고 있습니다. :lazy(()=>import('../comComponents/PersonalInfo')),},];컨텍스트 constdataSteps=useMult의 사용자 정의 후크에 전달합니다.

P粉548512637 · Answer

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

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

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

으아악

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

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

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

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