タイトルを次のように書き換えました: 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) mountInminatedComponent 内 (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 フックが 1 回だけ呼び出され、その戻り値が記憶されるようになります。

2. 2 番目の提案: コードを次のように変更してみてください:

   const { currentStep, next, back, isFirst } = データ ?? {};

これにより、データ オブジェクトが空でない場合にのみ構造化操作が行われることが保証されます。