Estoy tratando de asociar un botón Me gusta con cada componente de PaperCard como se muestra en el código a continuación. He incluido el código correspondiente. Actualmente, aparece el botón Me gusta y cada vez que hace clic en él, el contador aumenta PERO todos los botones comparten el mismo estado. Así que estoy tratando de arreglar eso. Soy nuevo en JS y React.
Cualquier ayuda será apreciada. ¡Gracias!
function Home() { const [likes, setLikes] = useState(0); const incrementLikes = () => { const addToLikes = likes + 1; setLikes(addToLikes) } const loadMorePapers = () => { setVisible((prevValue) => prevValue + 3);} return ( <div> <div style={{display:'flex', justifyContent:'center'}}> <h1>Latest Papers</h1> </div> {apiData.slice(0, visible).map((paper) => ( <Grid key={paper.title}> <button onClick={incrementLikes}>Likes: {likes}</button> <PaperCard title={paper.title} abstract={paper.abstract}/> </Grid> ))} <div style={{display:'flex', justifyContent: 'center'}}> <Button variant="contained" onClick={loadMorePapers}>Load More</Button> </div> </div> ) }El elemento de la devolución de llamada del mapa se extrae como un componente y ahora cada botón tiene su propio estado.
function Home() { return ( <div> <div style={{ display: "flex", justifyContent: "center" }}> <h1>Latest Papers</h1> </div> {apiData.slice(0, visible).map((paper) => ( <LikeButton paper={paper} key={paper.title} /> ))} <div style={{ display: "flex", justifyContent: "center" }}> <button variant="contained" onClick={loadMorePapers}>Load More</button> </div> </div> ); } function LikeButton(paper) { const [likes, setLikes] = useState(0); const incrementLikes = () => { const addToLikes = likes + 1; setLikes(addToLikes); }; return ( <div key={paper.title}> <button onClick={incrementLikes}>Likes: {likes}</button> <PaperCard title={paper.title} abstract={paper.abstract}/> </div> ); }Cree un nuevo componente funcional llamado LikeButton (o algo relevante) para albergar el estado de cada botón de forma independiente.
En ese componente, agregue los valores de estado que desea rastrear para cada botón. En tu caso parece que solo son los gustos.
Entonces podría ser algo como:
const LikeButton = () => { const [likes, setLikes] = useState(0); //likes controlled by state of component const incrementLikes = () => { setLikes((prevState) => prevState + 1); }; return <button onClick={incrementLikes}>Likes: {likes}</button>; };Luego agregue ese componente en lugar de su botón existente y elimine el estado de Me gusta en el componente Inicio. P.ej:
function Home() { const loadMorePapers = () => { setVisible((prevValue) => prevValue + 3); }; return ( <div> <div style={{ display: "flex", justifyContent: "center" }}> <h1>Latest Papers</h1> </div> {apiData.slice(0, visible).map((paper) => ( <Grid key={paper.title}> <LikeButton/> <PaperCard title={paper.title} abstract={paper.abstract} /> </Grid> ))} <div style={{ display: "flex", justifyContent: "center" }}> <Button variant="contained" onClick={loadMorePapers}> Load More </Button> </div> </div> ); }Si desea controlar el estado desde el componente Inicio, puede pasar los Me gusta como accesorios, pero no parece necesario para lo que desea.
En esta situación, debe considerar usar un componente de botón reutilizable para controlar el estado dentro del propio componente. Entonces no tienes que preocuparte de que los botones compartan el mismo estado. Este sería un ejemplo simple de un componente de botón que rastreará su conteo independientemente de los otros botones que se representan:
import React, { useState } from 'react'; export default function CounterButton() { const [count, setCount] = useState(0); function incrementLikes() { setCount(count + 1); } return ( <button onClick={incrementLikes}> {count} likes </button> ); }Simplemente podría representar estos botones como en el pseudocódigo a continuación:
{[0, 1, 2, 3].map((num: number, index: number) => ( <div key={index}> <CounterButton /> </div> ))}