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 ( 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 suruseMultistepssont 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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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).Par exemple, enveloppez le hook useApp dans un hook useMemo pour vous assurer qu'il n'est appelé qu'une seule fois :
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.
Cela garantira que l'opération de déstructuration ne se produit que lorsque l'objet de données n'est pas nul.Deuxième suggestion : essayez de modifier votre code comme ceci :
const { currentStep, next, back, isFirst } = data ??