Estoy usando mui-datatable y, según el ejemplo oficial de este codesandbox, puede setState en tableState . https://codesandbox.io/s/trusting-jackson-k6t7ot?file=/examples/on-table-init/index.js
handleTableInit = (action, tableState) => { console.log("handleTableInit: ", tableState); this.setState({ table: tableState }); }; handleTableChange = (action, tableState) => { console.log("handleTableChange: ", tableState); this.setState({ table: tableState }); }; Quería obtener tableState.displayData , por lo tanto, agregué esto, sin embargo, esto dará como resultado un error que dice:
Se superó la profundidad máxima de actualización. Esto puede suceder cuando un componente llama repetidamente a setState dentro de componentWillUpdate o componentDidUpdate. React limita la cantidad de actualizaciones anidadas para evitar bucles infinitos.
const handleChange = (action, tableState) => { console.log(tableState.displayData); setDisplayedData(tableState.displayData); }; const options = { enableNestedDataAccess: ".", print: false, filterType: "multiselect", selectableRows: "none", downloadOptions: { filename: "Data.csv", separator: "," }, expandableRows: true, onTableChange: handleChange, onTableInit: handleTableChange, Quería almacenar los datos de tableState.displayData en setDisplayedData . ¿Cómo puedo solucionar este error?
Recreé este error en codesandbox: https://codesandbox.io/s/mui-datatable-reports-mqrbb3?file=/src/App.js:4130-4415
Esto es seguir renderizando porque ha usado setDisplayedData en la función handleChange . así que cada vez que cambie la tabla, actualice el estado y vuelva a cambiar el estado. Así que va a un bucle infinito.
debe poner la condición para verificar si los datos que está obteniendo son diferentes de los anteriores o no. puede probar las funciones isEqualwith & isEqual de la biblioteca lodash para verificar si sus nuevos datos son diferentes de los antiguos o no.
const handleChange = (action, tableState) => { console.log(tableState.displayData); if(!isEqualwith(displayedData, tableState.displayData, isEqual)) { setDisplayedData([...tableState.displayData]);} };Nota: agregue lodash a sus dependencias e importe las funciones isEqualwith & isEqual.