标题重写为：Importation de composants dynamiques dans Vite avec React et TypeScript provoquant un échec lors de l'actualisation rapide

Question

J'essaie de créer un formulaire en plusieurs étapes et je mets les données dans un fichier séparé pour des constantes comme celle-ci

importer {lazy} depuis "react"

export const steps = [
  {
    id: 0,
    name: 'Personal Info',
    component: lazy(() => import('../components/PersonalInfo')),
  },
];

Je le passe à un hook personnalisé dans le contexte

const dataSteps = useMultiStep(steps);

const { next, back, currentStep, isFirst } = dataSteps;

C'est un crochet personnalisé

import { useState } from 'react';
import { MultistepProps } from '../@types/Multiform';

const useMultiStep = (steps: MultistepProps[]) => {
  const [step, setStep] = useState(0);

  const isLast = step === steps?.length - 1;
  const isFirst = step === 0;

  const next = (): void => {
    if (isLast) return;
    setStep((current) => current + 1);
  };

  const back = (): void => {
    if (isFirst) return;
    setStep((current) => current - 1);
  };

  return {
    step,
    next,
    back,
    currentStep: steps[step],
    isFirst,
  };
};

export default useMultiStep;

J'utilise des composants dynamiques ici

import FormInterface from './interface/FormInterface';
import useApp from './hooks/useApp';
import { Suspense } from 'react';
function App() {
  const data = useApp();

  const { currentStep, next, back, isFirst } = data;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    next();
  };

  return (
    <FormInterface>
      <form
        onSubmit={handleSubmit}
        className="flex flex-col h-full py-5 group"
        noValidate={true}
      >
        {currentStep.component && (
          <>
            <h1 className="text-3xl font-bold text-marineBlue">
              {currentStep?.name}
            </h1>

            <Suspense fallback={<div>Loading...</div>}>
              <currentStep.component /> //here
            </Suspense>

            <div
              className={`mt-4 sm:mt-auto flex ${
                isFirst ? 'justify-end' : 'justify-between'
              }`}
            >
              <button
                type="button"
                className={`hover:text-marineBlue font-bold text-coolGray py-2 px-5 rounded-md text-[13px] ${
                  isFirst ? 'hidden' : 'block'
                }`}
                onClick={back}
              >
                Go Back
              </button>
              <button
                type="submit"
                className="hover:bg-purplishBlue bg-marineBlue text-white py-2 px-5 rounded-md text-[12px] group-invalid:pointer-events-none group-invalid:opacity-30 self-end"
              >
                Next Step
              </button>
            </div>
          </>
        )}
      </form>
    </FormInterface>
  );
}

export default App;

Ma configuration vite est comme ça

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});

Après tout essayé, j'obtiens toujours cette erreur, pas au premier rendu, mais au rechargement du composant

App.tsx:7 Uncaught TypeError : Impossible de déstructurer la propriété 'currentStep' de 'data' car elle est nulle. Dans l'application (App.tsx:7:11) dans renderWithHooks (react-dom.development.js:16305:18) dans mountInratedComponent (react-dom.development.js:20074:13) Au début du travail (react-dom.development.js:21587:16) sur HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14) sur Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16) dans EnsureGuardedCallback (react-dom.development.js:4277:31) à beginWork$1 (react-dom.development.js:27451:7) dans PerformUnitOfWork (react-dom.development.js:26557:12) LoopSync au travail (react-dom.development.js:26466:5)

Je crois qu'il s'agit d'un problème de gestion des ressources humaines car c'est comme charger la page entière avec uniquement les composants car l'état est perdu et les informations sur useMultisteps sont perdues mais je n'arrive tout simplement pas à trouver un moyen de le faire fonctionner, s'il vous plaît aidez-moi, enseignez moi de meilleures façons d'accomplir ce que je veux faire

Answer 1

Lorsque vous mettez à jour le composant, votre état semble être perdu (probablement parce que le hook useApp() revient avant que les données ne soient prêtes null).

1. Essayez d'encapsuler les composants avec état dans React memo(). De cette façon, l'état de votre composant est préservé lors des mises à jour HMR.

Par exemple, enveloppez le hook useApp dans un hook useMemo pour vous assurer qu'il n'est appelé qu'une seule fois :

const data = useMemo(() => useApp(), []);

Pour résumer, cela garantira que le hook useApp n'est appelé qu'une seule fois et que sa valeur de retour est mémorisée, même si le composant est restitué en raison de HMR.

2. Deuxième suggestion : essayez de modifier votre code comme ceci :

   const { currentStep, next, back, isFirst } = data ??

Cela garantira que l'opération de déstructuration ne se produit que lorsque l'objet de données n'est pas nul.