Estoy escribiendo una función para dar me gusta/no me gusta a las publicaciones y sumar o restar 1 del total de me gusta. Algo no está bien ya que la suma funciona correctamente (suma 1) pero resta 2 por alguna razón. No estoy seguro de si tiene que ver con el retraso en la actualización del estado.
const Post = (props: PostProps) => { const { post: { content, author, postedDate, likes, comments, shares, isLiked, isBookmarked, }, } = props; const [isPostBookmarked, setIsPostBookmarked] = useState(isBookmarked); const [isPostLiked, setIsPostLiked] = useState(isLiked); const [likesCount, setLikesCount] = useState(likes); const handlePostLikeClick = () => { setIsPostLiked((prevIsLikedState) => { setLikesCount((prevLikesCountState) => { return prevIsLikedState ? prevLikesCountState - 1 : prevLikesCountState + 1; }); return !prevIsLikedState; }); return ( <IconButton icon={Heart} label={likesCount} filled={isPostLiked} onClick={handlePostLikeClick} /> ) };Está anidando dos actualizaciones de estado diferentes en la misma función, lo que genera algunos problemas confusos.
¿Puedes intentar cambiar tu función handlePostLikeClick a la que se menciona a continuación?
const handlePostLikeClick = () => { setLikesCount((prevLikesCountState) => { return isPostLiked ? prevLikesCountState - 1 : prevLikesCountState + 1; }); setIsPostLiked((prevIsLikedState) => { return !prevIsLikedState; }); };Puede usar este código sandbox como referencia
La respuesta dada por @sumanth parece bastante correcta, pero parece que falta algo. En la respuesta dada, usando la misma función onClick handlePostLikeClick , se actualizarán 2 estados. Pero solo debe usarse para actualizar isPostLiked . Porque likesCount debe actualizarse solo si se detecta algún cambio de estado para el estado isPostLiked . Por lo tanto, es esencial use effect de uso de la siguiente manera.
const [isPostLiked, setIsPostLiked] = useState(false); const [likesCount, setLikesCount] = useState(1); useEffect(() => { setLikesCount((current) => (isPostLiked ? current + 1 : current - 1)); }, [isPostLiked]); const handlePostLikeClick = () => { setIsPostLiked((prevIsLikedState) => !prevIsLikedState); };explicación
El estado inicial para likesCount usa como 1, porque durante el use effect y se actualizará likesCount a 0 (ya que el estado inicial de isPostLiked es false ). Además, puede ver que likesCount aumenta su conteo solo si isPostLiked es true .
Pero con la respuesta de @sumaneth, likesCount aumenta si isPostLiked es falso.
isPostLiked ? prevLikesCountState - 1 : prevLikesCountState + 1; Por lo tanto, no está rastreando el cambio actual del estado isPostLiked , pero está usando su estado anterior para realizar la actualización en likesCount .
Por lo tanto, definitivamente, necesita usar use effect para realizar un seguimiento del cambio actual del estado isPostLiked y hacer la actualización en likesCount .