Tengo una tabla con una fila que tiene una casilla de verificación y tengo un objeto llamado elipse.
Necesito hacer que el objeto de elipse ingrese a la matriz de elipse savedEllipse (que usa useState) tan pronto como haga clic en la casilla de verificación.
En la prueba que hice, veo que el objeto elipse entró en la matriz, pero ahora tengo que salir de la matriz una vez que desmarco la casilla de verificación, y no pude entender cómo podría hacerlo con un tipo de objeto como el objeto de elipse que tengo aquí.
Puede ver que hice lo mismo con setChekcedState, que se asegura de que el nombre de la casilla de verificación entre y salga de la matriz de estado comprobado, y funciona muy bien, pero cuando traté de hacerlo con el objeto elipse de la misma manera, No funcionó.
¿Tienes una idea?
Encontré (aquí en StackOverflow) algunas preguntas que están cerca de esto, pero ninguna de ellas se ocupó de este problema específico, así que no se confunda.
Aquí está el código:
export default function App() { const [checkedState, setChekcedState] = useState([]); const [savedEllipse, setSavedEllipse] = useState([]); const ellipse = { a: [12, 22], b: [22, 55], c: [42, 68] }; const ellipseSet = (e) => { const { checked, name } = e.target; if (checked) { setChekcedState((oldState) => [...oldState, name]); setCheckedEllipse((oldState) => [...oldState, ellipse]); } else { setChekcedState((oldState) => oldState.filter((row) => row !== name)); } }; return ( <TableContainer> <Table aria-label="simple table"> <TableBody > <TableRow> <TableCell padding="checkbox"> <Checkbox onChange={ellipseSet} checked={checkedState.includes((row.id).toString())} name={1}/> </TableCell> </TableRow> </TableBody> </Table> </TableContainer> ); }use estas 2 funciones para verificar la igualdad de los objetos
function isEqual(object1, object2) { return arrayEquals(object1.a,object2.a) && arrayEquals(object1.b,object2.b) && arrayEquals(object1.c,object2.c); } function arrayEquals(a, b) { return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val === b[index]); }Entonces podemos establecer el estado en la lista de elipse :)
setCheckedEllipse((oldState) => oldState.filter((row) => !isEqual(row,ellipse));