En React, estoy trabajando con una cuadrícula de Kendo. Tengo una cuadrícula que está llena de una matriz de estado como esta:
const [tempAtributi, setTempAtributi] = useState([]); // ... const MyCommandCell = (props) => { const indexObj = tempAtributi.findIndex( (e) => e.atribut_id === props.dataItem.atribut_id ); const Remove = () => { if (indexObj > -1) { const lista = tempAtributi; lista.splice(indexObj, 1); setTempAtributi(lista); } }; return ( <td className="k-command-cell"> <Button className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-grid-remove-command" onClick={() => Remove()} > <FaTrash /> Remove </Button> </td> ); }; const Cell = (props) => <MyCommandCell {...props} />; useEffect(() => { (async () => { try { const resAtr = await services.getTemplateAtributi( state.data.sn_template_id ); setTempAtributi(resAtr.data.rlista); } catch (e) { console.log(e); } })(); }, []); //... return ( <> <Grid data={tempAtributi}> <GridColumn field="name" title="Atribut" filter="text" /> <GridColumn cell={CommandCell} title="remove" filter="text" /> </Grid> </> );Entonces, al renderizar, llamo a una API en useeffect y lleno el estado tempAtributi con una matriz de objetos. Mi cuadrícula está llena. Después de eso, tengo una columna Eliminar donde puede hacer clic y al hacer clic, se verifica si ese atributo está dentro de la matriz de objetos tempAtributi. Si es así, actualizo el estado de tempAtributi con una matriz de objetos menos el objeto que se elimina. Después de que terminé de eliminar, debo hacer clic en confirmar que llama a una API y establece el estado de tempAtributi como el valor actualizado/nuevo (si llamo a services.getTemplateAtributi después de hacer clic en Confirmar, obtengo valores actualizados):
<Button themeColor={"primary"} style={{marginTop:'2%', marginRight:'2%'}} onClick={() => Confirm()}> Confirm </Button>Si hago clic en eliminar una o más veces (sin confirmar), todo está bien, si registro el estado en la consola, no tiene el objeto eliminado, pero la cosa es que todavía puedo ver el objeto en la cuadrícula aunque es ya no está en el estado tempAtributi. Quiero actualizar la cuadrícula después de hacer clic en eliminar para que esa fila no esté allí. No sé cómo actualizar la cuadrícula después de la eliminación, porque si llamo a useeffect, llamará a la API y la establecerá en los valores iniciales. ¡Se necesita ayuda!
Mi primera suposición sería eliminar la copia profunda del objeto. Dado que la clonación de objetos en JavaScript los vincula profundamente. Puedes probar esto con un ejemplo simple:
const a = { b: { c: 'd' } } } const b = a bbc = 'e' console.log(a, b) Como notará, tanto a como b tienen el mismo valor, pero solo mutamos uno de ellos. Puede eliminar este empate usando b = JSON.parse(JSON.stringify(a)) , que es el enfoque más común.
Entonces, en su ejemplo, su función de eliminación debería verse así:
const Remove = () => { if (indexObj > -1) { const deepCopy = JSON.parse(JSON.stringify(tempAtributi)); deepCopy.splice(indexObj,1); setTempAtributi(deepCopy); } }