Tengo un gancho useState simple con el que se administra el estado de las casillas de verificación seleccionadas.
Las casillas de verificación seleccionadas deben mostrarse en la interfaz de usuario (dentro de mi filtro).
Las casillas de verificación seleccionadas se almacenan correctamente, pero solo se muestran cuando cierro mi componente de filtro y lo abro nuevamente. No inmediatamente después de marcar una casilla de verificación.
Aquí está mi estado actual (simplificado):
Componente de filtro:
const [selected, setSelected] = useState([]); const handleState = (id: string) => { const selectedIndex = selected.findIndex((i) => i.id === id); if (selectedIndex > -1) { selected.splice(checkedIndex, 1); } else { selected.push(data.find((i) => i.id === id)); } // set the state of the selected checkboxes setSelected(selected); };Representación:
{selected.length > 0 ? ( <div className="selected-boxes"> {selected.map((cb) => ( <span key={cb.label}>{cb.label}</span> ))} </div> ) : ( // some other stuffselected es una matriz que muta cuando se marca alguna casilla de verificación, pero referencialmente, este sigue siendo el mismo valor, por lo que React no volverá a representar el componente.
Cuando cierra el filtro, el componente se desmonta y cuando lo abre de nuevo, se monta con los valores nuevos.
Debe devolver una nueva matriz en lugar de mutar la actual, por ejemplo, así:
// set the state of the selected checkboxes setSelected(selected.slice());o
// set the state of the selected checkboxes setSelected([...selected]);o use immer que le permite trabajar con estado inmutable de una manera más conveniente.