Je suis en train de créer un moteur de formulaire dynamique et je souhaite afficher les résultats du magasin redux lorsque le composant Résumé de la réponse est rendu. La façon dont j'ai pensé qu'il serait préférable de le faire serait d'avoir un statut `` complet '' et de le définir sur true une fois que le composant answerSummary est chargé, mais cela dans la fonction de carte ne fonctionne pas et génère l'erreur de réaction en boucle infinie.
Le code est ici:
function App() {
let [complete, setComplete] = useState(false);
return (
<div>
<h1>Form App Prototype</h1>
<Router>
<Switch>
{Object.values(Database.steps).map(step => {
step.name === 'answerSummary' ? setComplete(true) : setComplete(false);
return (
<Route exact path={`/${step.name}`} render={() =>
<Step step={step} />
}
/>
)
})}
</Switch>
</Router>
<br></br>
<div style={{display: complete? 'block' : 'none'}}><StoreVisual/></div>
</div>
);
}
export default App;
EDIT: Je sais que vous ne pouvez pas définirState à l'intérieur du rendu - je l'ai écrit de cette façon pour essayer de transmettre ce que je veux être capable de faire
Si vous ne souhaitez effectuer le rendu que <StoreVisual/>lorsqu'ils sont à la dernière étape, il peut être plus facile de configurer un hook d'état pour l'index de l'étape sur laquelle les personnes se trouvent.
const [index, setIndex] = useState(0);
Chaque fois que quelqu'un progresse d'un pas, incrémentez cette valeur.
Vous devrez passer setIndex, ou ce que vous appelez votre passeur, dans le Stepcomposant pour ce faire.
Ensuite, vous pouvez rendre <StoreVisual/>avec un conditionnel, comme ça ...
<div>
<h1>Claimer Form App Prototype</h1>
<Router>
<Switch>
{Object.values(Database.steps).map(step =>
<Route exact
path={`/${step.name}`}
render={() => <Step step={step} /> }/> )}
</Switch>
</Router>
<br></br>
{Database.steps[index] === 'answerSummary' && <StoreVisual/>}
</div>
Cette approche vous offre également un moyen simple de laisser les gens commencer au milieu du formulaire. Supposons que vous souhaitiez permettre aux utilisateurs d'enregistrer des formulaires semi-finis à l'avenir, il vous suffit de modifier / mettre à jour la valeur par défaut du hook d'index.
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots