タイトルを次のように書き換えました: React と typescript を使用した Vite での動的コンポーネントのインポートにより高速リフレッシュが失敗する

Question

マルチステップフォームを作成しようとしていますが、このような定数のデータを別のファイルに入れています import{lazy} from 'react';exportconststeps=[{id:0,name:'PersonalInfo',component :lazy(()=>import('../components/PersonalInfo')),},];コンテキスト constdataSteps=useMult のカスタム フックに渡します。

P粉548512637 · Answer

コンポーネントを更新すると状態が失われるようです (おそらく、データの準備ができる前に useApp() フックが null を返すためです)。

React memo() でステートフルコンポーネントをラップしてみます。このようにして、HMR の更新中にコンポーネントの状態が保持されます。

たとえば、useApp フックを useMemo フックでラップして、一度だけ呼び出されるようにします。

リーリー

要約すると、これにより、HMR によってコンポーネントが再レンダリングされた場合でも、useApp フックが 1 回だけ呼び出され、その戻り値が記憶されるようになります。

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

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

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