Actualmente estoy tratando de almacenar los datos adjuntos a los botones en el sitio cuando un usuario hace clic en ellos. Estoy usando la función onClick para capturar los datos pasados desde el botón y estoy intentando establecerlo en el estado. El problema con el que me estoy encontrando; sin embargo, es que el valor del estado no se actualiza por algún motivo y sigue siendo una matriz vacía. Mi resultado deseado si el objeto existe en la matriz, actualícelo. Si no es así, agregue a la matriz. Cualquier orientación sobre por qué el estado no se actualiza correctamente sería muy apreciada. Mi código es el siguiente:
import { useState } from "react"; export default function App() { const [formData, setFormData] = useState([]); const data = [ { name: "test1", id: 1, isActive: false }, { name: "test2", id: 2, isActive: false } ]; const handleClick = (item) => { setFormData( (formData) => formData.map((res) => res?.id === item.id ? { ...res, checked: !res.isActive } : { ...item, checked: !item.isActive } ) ); }; return ( <div className="App"> {data.map((item) => { return <button onClick={() => handleClick(item)}>{item.name}</button>; })} </div> ); }
se adjunta un entorno limitado de código para la depuración: https://codesandbox.io/s/peaceful-sun-20ec0?file=/src/App.js:0-681
Creo que el problema principal es que está inicializando formData
para que sea una matriz vacía. Esto hace que la llamada de map
en formData
en handleClick
no haga nada, porque llamar a map en una matriz vacía no llamará a la función de mapa en ningún elemento.