标题重写为:Importation de composants dynamiques dans Vite avec React et TypeScript provoquant un échec lors de l'actualisation rapide
P粉546179835
P粉546179835 2023-11-10 20:45:29
0
1
829

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 (  
{currentStep.component && ( <>

{currentStep?.name}

Loading...
}> //here
)} ); } 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 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

P粉546179835
P粉546179835

répondre à tous (1)
P粉548512637

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êtesnull).

  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.

  1. 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.

    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!