Tengo una lista de entradas de verificación, y cuando se seleccionan y deseleccionan, intento agregarlas/eliminarlas del estado. Pero he notado que cuando anulo la selección de uno, el que seleccioné antes es el objeto eliminado del estado. Creo que esto se debe a que cuando se llama a la función onChange, el estado no se ha actualizado (aunque la interfaz de usuario sí lo ha hecho), pero no entiendo cómo tener una lista completa de todas las comprobaciones seleccionadas con el estado retrasado en un valor. Aquí está mi entrada y la función onChange:
const [selected, setSelected] = useState([]); const handleSelect = (e) => !!DATA && DATA.forEach((item, idx) => { let name = e.target.name; if (item.payerName === name && !selected.includes(item)) { setSelected([...selected, item]); return; } else if (item.payerName === name && selected.includes(item)) { // index varies let index = selected.indexOf(item); let clean = selected.splice(index, 1); setSelected(clean); } }); DATA.map((item, idx) => { return( <input name={item.payerName} type="checkbox" checked={selected.includes(item)} onChange={handleSelect} className="insurance-checkbox m-2 mt-3" /> ) }Prueba esto:
const [selected, setSelected] = useState([]); const handleSelect = (e) => { const { name } = e.target; const item = DATA.find(({ payerName }) => payerName === name); if (selected.includes(item)) { setSelected(selected.filter((s) => s === item); } else { setSelected([...selected, item]); } }o mejor:
const handleSelect = (e) => { const { name, checked } = e.target; const item = DATA.find(({ payerName }) => payerName === name); if (checked) { if (!selected.includes(item)) { // probably not needed setSelected([...selected, item]); } } else { setSelected(selected.filter((s) => s === item); } }