Así que tengo este conteo donde incrementaré una vez que se haga clic en el button with handleFollow()
(tengo varios botones con handleFollow() y solo muestro uno aquí) . ¿Cómo hago un seguimiento del conteo y luego cambio allowNext to false
una vez que el conteo es más de 3 para que pueda hacer clic en el botón?
let count = 0; const [allowNext, setAllowNext] = useState(true) const [followed, setFollowed] = useState({ 1 : false, 2 : false, 3 : false, 4 : false, 5 : false, }) const handleFollow = (idx) => { const val = !followed[idx] setFollowed(prev => ({...prev, [idx] : val})) count += 1 } <div> <Button onClick={() => {handleFollow(5);}} style={buttonStyle1} disabled={clicked[4]}>Continue</Button> </div> // disabled={allowNext=false} only when count is more than 3 to make it clickable <div> <Button style={buttonStyle2} disabled={allowNext} onClick={() => {setSelectedForm(2)}}>Next page</Button> </div>
Primero define contar como estado y luego puede agregar useEffect para este caso
const [count, setCount] = useState(0); useEffect(() => { if (count > 3){ setAllowNext(false); } }, [count]);
Y cambie la forma en que incrementa en handleFolow en lugar de count += 1
, use setCount(prev => prev+1)
El enfoque alternativo sería mantener el conteo como estado y mantener el incremento de setCount, pero en lugar de useEffect, después de incrementar el count
, verifica directamente
if (count > 3){ setAllowNext(false) }
Sin embargo, no estoy seguro de si esto es seguro porque accedemos directamente después de cambiar el estado, podría ocurrir un error, por lo que el primer enfoque sería mi camino a seguir.