Soy un nuevo desarrollador y esta es mi primera pregunta sobre el desbordamiento de pila, así que tenga paciencia. Espero que esta sea la comunidad correcta y la forma correcta de hacer una pregunta (avíseme si hay formas en que puedo mejorar mis consultas).
Así que tengo un componente funcional React que representa tres formas condicionalmente. Tomé un formulario grande y lo dividí en tres secciones para que cuando el usuario haga clic en el siguiente botón en el div, sea llevado al siguiente formulario y el siguiente botón llame a una función de controlador de clics que usa el estado para determinar qué formulario debe mostrarse. con un operador terciario para comprobar el estado. Mi problema es que la lógica de la función del controlador muestra el tercer formulario después del primer clic en lugar del segundo como cabría esperar, ¿alguna idea de una solución más sencilla o cómo solucionarlo? Tengo el código a continuación y lo simplifiqué tanto como pude para intentar mostrar el problema de lógica con el que estoy lidiando.
//Código
import { useState } from "react"; export default function PinFormTest(){ const [showFirstForm, setShowFirstForm] = useState(true) const [showSecondForm, setShowSecondForm] = useState(false) const [showThirdForm, setShowThirdForm] = useState(false) const handleNextForm = () => { showFirstForm ? setShowFirstForm(false) && setShowSecondForm(true): showSecondForm ? setShowSecondForm(false) && setShowThirdForm(true): console.log("error") } return( <> <div className="formContainer"> {showFirstForm ? (<>firstForm</>): showSecondForm ? (<>secondForm</>): (<>thirdForm</>) } </div> <div> <button onClick={() => handlePreviousForm()}>Previous</button> <button onClick={() => handleNextForm()}>Next</button> </div> </>) }En tales situaciones, intente evitar el uso del operador ternario porque causará problemas como la legibilidad, lo que dificultará la depuración más adelante.
const handleNextForm = () => { if (showFirstForm) { setShowFirstForm(false); setShowSecondForm(true); return; } if (showSecondForm) { setShowSecondForm(false); setShowThirdForm(true); return; } console.log("error"); };Debe escribir varias líneas de declaraciones en operadores ternarios escribiendo declaraciones separadas por comas. Su código correcto será;
const handleNextForm = () => { showFirstForm ? (setShowFirstForm(false), setShowSecondForm(true)) : showSecondForm ? (setShowSecondForm(false), setShowThirdForm(true)) : console.error(error); };Está utilizando && y solo evaluará right solo si la left es true
left&&right// Ejemplo
Por lo tanto, está utilizando setShowFirstForm(false) && setShowSecondForm(true) , por lo que primero evaluará setShowFirstForm(false) desde el cual no devolverá nada, por lo que el valor de retorno será undefined , que es un valor falsy . Entonces esto evaluará setShowSecondForm(true)
Solution 1
Puede usar , aquí como: Demostración de Codesandbox
showFirstForm ? (setShowFirstForm(false), setShowSecondForm(true)) : showSecondForm ? (setShowSecondForm(false), setShowThirdForm(true)) : console.log("error"); Solution 2
Puede usar la bifurcación if-else simple, la demostración de Codesandbox
if (showFirstForm) { setShowFirstForm(false); setShowSecondForm(true); } else if (showSecondForm) { setShowSecondForm(false); setShowThirdForm(true); } else { console.log("error"); } Solution 3
Puede usar Map aquí para crear un mapa para el nivel de formulario y el componente para representar, otra solución no será una mejor solución si aumentan las etapas en el formulario. Enlace de Codesandbox
import React, { useState } from "react"; import FirstForm from "./components/FirstForm"; import SecondForm from "./components/SecondForm"; import ThirdForm from "./components/ThirdForm"; const formComponentsArr = [FirstForm, SecondForm, ThirdForm]; const formComponents = new Map( formComponentsArr.map((comp, i) => { return [i + 1, comp]; }) ); export default function App() { const [level, setLevel] = useState(1); function handleNextForm() { if (level !== formComponents.size) { setLevel((l) => l + 1); } } function getComponent() { const comp = formComponents.get(level); return comp ? comp() : null; } return ( <> <div className="formContainer">{getComponent()}</div> <div> {/* <button onClick={() => handlePreviousForm()}>Previous</button> */} <button onClick={() => handleNextForm()}>Next</button> </div> </> ); } Solution 4 - BEST SULUTION
Cree un enlace personalizado que manejará el next y el previous . Todo lo que tiene que hacer es pasar una serie de componentes que deben renderizarse secuencialmente. Enlace de Codesandbox