Las llamadas de backend para incrementar los Me gusta representados por handleLike() y handleLike() devuelven con éxito la respuesta de contener el número que se ha incrementado/reducido.
Desafortunadamente, esta es la única forma en que puedo ver las fotos. Me photos.likes /disminuir en tiempo real.
Mi pregunta es: ¿Cómo hago para que solo pueda incrementar/disminuir la cantidad de Me gusta en 1 para el ID de UserID de la imagen específica en la que se hace clic en lugar de TODOS ellos? Además, ¿hay alguna manera de evitar el uso de la lógica de interfaz para lograr esto, ya que el incremento/decremento está ocurriendo en el lado del servidor?
Me he topado con un muro en esto y no estoy seguro de cómo superarlo.
const [currentUserClicks, setCurrentUserClicks] = useState(1); const [onChangeLikes, setonChangeLikes] = useState(null); const handleLikesBasedOnUserId = (likedPhotoUserId) => { if(currentUserClicks > 1) { setCurrentUserClicks(currentUserClicks - 1); handleDisLike(likedPhotoUserId); // sends data to server to decrement DB column setonChangeLikes(false); } else { setCurrentUserClicks(currentUserClicks + 1); handleLike(likedPhotoUserId); // sends data to server to increment DB column setonChangeLikes(true); } }; return( { data.map((photos, index) => { return <> <div key={index}> <img src={photos.url} alt="Photo" className="gallery-img" onClick={() => handleLikesBasedOnUserId(photos.UserID)}/> <h5 className="likes">Likes: {!onChangeLikes ? photos.likes - 1: photos.likes + 1}</h5> </div> </> }) } );En estos casos, debe mover el estado localmente a los elementos mapeados:
const { useState, useEffect } = React; const App = () => data.map((pic) => <Pic key={pic.id} data={pic} />); const Pic = ({ data }) => { const [likes, setLikes] = useState(data.likes); const handleClick = (type) => { if (type === 'increment') { if (likes - data.likes <= 0) { // handleLike(id); // sends data to server to increment DB column setLikes((l) => l + 1); } else { // handleDisLike(id); // sends data to server to decrement DB column setLikes((l) => l - 1); } } if (type === 'decrement') { if (likes - data.likes >= 0) { // handleDisLike(id); // sends data to server to decrement DB column setLikes((l) => l - 1); } else { // handleLike(id); // sends data to server to increment DB column setLikes((l) => l + 1); } } }; return ( <div> <img src={data.url} alt="Photo" className="gallery-img" /> <div className="container"> <h5 onClick={() => handleClick('decrement')}>-</h5> <h5 className="likes"> Likes: {likes} </h5> <h5 onClick={() => handleClick('increment')}>+</h5> </div> </div> ); }; const data = [ { url: 'https://upload.wikimedia.org/wikipedia/commons/a/a6/Pink_lady_and_cross_section.jpg', likes: 10, id: 'apple1', }, { url: 'https://upload.wikimedia.org/wikipedia/commons/2/22/Malus_domestica_a1.jpg', likes: 25, id: 'apple2', }, ]; const root = ReactDOM.createRoot(document.getElementById("root")) root.render(<App/>) .gallery-img { width: 100px; } .container { display: flex; } h5 { cursor: pointer; margin: 10px; } <div id="root"></div> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>No estaba seguro de lo que estaba tratando de hacer ya que no tenía ningún botón de me gusta/no me gusta, por lo que no estaba seguro de su lógica: (primer clic --> me gusta | segundo clic --> restablecer | ¿tercer clic?) Así que Agregué dos clics de me gusta/no me gusta y modifiqué un poco la lógica para permitir solo un voto de me gusta/no me gusta, y reinicié si intentaba aumentar/disminuir aún más, ya que funciona aquí en StackOverflow.
Considere que, por cierto, debe manejar esta lógica del lado del servidor, y debe realizar una llamada en el montaje del componente para verificar si el usuario ya votó o no, en un escenario del mundo real, o es suficiente una actualización para poder votar varias veces .