Tengo un sistema de me gusta similar a Instagram. El problema es que cada vez que me gusta una foto, el estado actual de currentUserClicks no es su propio estado para todos los usuarios.
Por ejemplo: Existen fotos A y B. A tiene 10 me gusta B tiene 20 me gusta.
Si hago clic en Me gusta en la foto A, entonces el conteo de Me gusta se convierte correctamente en 11
Inmediatamente después, si hago clic en Me gusta en la foto B, el conteo de Me gusta se convierte incorrectamente en 19 en lugar de 21.
El estado currentUserClicks piensa que la foto B no debería gustar (disminuye el conteo de Me gusta en 1 al igual que Instagram) porque currentUserClicks se convierte en> = 1.
¿Cómo puedo hacer que cada usuario tenga su propio valor currentUserClicks ?
const [currentUserClicks, setCurrentUserClicks] = useState(null); const handleLikesBasedOnUserId = (likedPhotoUserId) => { if(currentUserClicks >= 1) { setCurrentUserClicks(currentUserClicks - 1); handleDislike(likedPhotoUserId); } else { setCurrentUserClicks(currentUserClicks + 1); handleLike(likedPhotoUserId); } };Puede "individualizar" el estado de un par de formas básicas.
Empuje el estado hacia abajo a los componentes a los que pertenece.
Aquí mueve el estado actual de currentUserClicks a un componente de React que administra su propio estado y actualizaciones, completamente independiente de cualquier otro componente de React.
Ejemplo:
const InstagramPost = (props) => { const [liked, setLiked] = useState(false); const handleLikesBasedOnUserId = () => { if (liked) { handleDislike(id); // id from props } else { handleLike(id); } setCurrentUserClicks(liked => !liked); }; ... return ( ... <button onClick={handleLikesBasedOnUserId}>like</button> ... ); };...
{posts.map(post => ( <InstagramPost key={post.id} ....props.... /> ))}Eleve el estado a un componente antepasado común y maneje las actualizaciones de estado de fusión.
Ejemplo:
const InstagramPost = ({ liked, likeHandler }) => { ... return ( ... <button onClick={likeHandler}>like</button> ... ); };...
const [liked, setLiked] = useState({}); const handleLikesBasedOnUserId = (id) => { if (liked[id]) { handleDislike(id); } else { handleLike(id); } setCurrentUserClicks(liked => ({ ...liked, [id]: !liked[id], // toggle liked state by id })); }; ... {posts.map(post => ( <InstagramPost key={post.id} liked={liked[post.id]} likeHandler={() => handleLikesBasedOnUserId(post.id)} ....props.... /> ))}