Actualmente estoy trabajando en actualizaciones de estado de reacción.

Los datos que intento actualizar son un cierto par clave-valor en una matriz de objetos.

Cuando hago clic en el botón de aprobación, el valor de la tecla "me gusta" debe aumentar.

El problema al que me enfrento es que el botón Me gusta aumentará en 2 desde el segundo clic.

¿Cómo debo manejar este problema?

El código en el que estaba trabajando es:

 import React, {useState} from 'react'; import './App.css'; function App() { const [data, setData] = useState([{id: 0, title: '남자 코트 추천', date: '2월 17일', likes: 0}, {id: 1, title: '여자 코트 추천', date:'2월 18일', likes:0}, {id: 2, title: '강남 맛집 추천', date:'2월 19일', likes:0},]); const handleLikesClick = (event) => { event.stopPropagation() setData((prevState)=>{ const updateData = [...prevState] const id = parseInt(event.target.getAttribute("value")) updateData[id].likes += 1; return updateData }) } return ( <div className="App"> <div className="black-nav"> <div>개발 Blog</div> </div> {data.map(post => ( <div className="list" key={post.id}> <h3>{post.title} <span onClick={handleLikesClick} value={post.id}>👍</span>{post.likes}</h3> <p>{post.date}</p> <hr/> </div> ))} </div> ); } export default App;