import React, {useState, useEffect} from 'react'; const Test = ( {numar}) => { const [likeStatus, setLikeStatus] = useState(true); const [likeNumber, setLikeNumber] = useState(100); const onLikeHandler = () => { setLikeStatus(prevState => !prevState); if(likeStatus){ setLikeNumber(prevState=> prevState +1) } else { setLikeNumber(prevState=>prevState-1); } } console.log(likeStatus); console.log(likeNumber); return <button className={`like ${likeStatus ? 'liked' : ""}`} onClick={onLikeHandler}>{`Like | ${ likeNumber}`}</button> } export default Test;Estoy tratando de hacer un botón Me gusta que me gusta/no me gusta en función del clic.
¿Cómo puedo hacer que la segunda función de cambio de estado espere a que termine mi primera función de estado? Intenté usar un gancho de efecto de uso, y estoy usando likeStatus en la matriz de dependencia, pero por alguna razón, la función "diferente" se activa dos veces al actualizar"
La actualización de estado es asíncrona, y se accede al estado desde el cierre, que se recrea solo después de volver a renderizar, lo que significa que no puede establecer el estado y luego en la siguiente línea para esperar que obtendrá ese nuevo estado de inmediato, obtendrá un nuevo estado pero solo en la siguiente función call (después de que el elemento se vuelva a renderizar). La solución es preservar el nuevo estado en la variable temporal.
Reescribe esto:
const onLikeHandler = () => { const newLikeStatus = !likeStatus; // Here you are preserving that new state in temp variable setLikeStatus(newLikeStatus); if(newLikeStatus){ setLikeNumber(prevState=> prevState +1) } else { setLikeNumber(prevState=>prevState-1); } }