En mi aplicación de reacción, tengo columnas que muestran datos en formato de cuadrícula, con dos vistas diferentes (seleccionando && la vista predeterminada) y cada columna tiene un controlador que se puede arrastrar y cambiar el tamaño del ancho. Cuando el usuario hace clic en el modo de selección, se agrega una casilla de verificación al frente de la matriz de columnas de objetos.

Tengo una función que guarda para indicar el ancho de la columna después de que el usuario la cambia de tamaño, al índice correcto de la columna. (El usuario arrastra el controlador de la primera columna, guardará ese nuevo ancho en la columna indexada 0).

 overrideColumnWidth = (columnIndex, newWidth) => { this.setState({ columnWidthOverrides: { ...this.state.columnWidthOverrides, [columnIndex]: newWidth } });

También tengo una función que se parece a esta donde, si la cuadrícula está en modo de selección, crea un nuevo objeto que tiene valores establecidos en un índice incrementado, debido a que la casilla de verificación se agrega en el modo de selección y no desea que la columna de la casilla de verificación se transfiera el ancho modificado. Se mantiene un estado hecho para evitar que esta función se llame varias veces. Después de que mi estado columnWidthOverrides se verá como los dos ejemplos a continuación

 columnWidthOverrides = { 0: 400, 1: 500, 2: 600} columnWidthOverridesSelectMode = { 0: undefined, 1: 400, 2: 500, 3: 600} componentWillUpdate(nextProps) { if (nextProps.isSelecting && !this.state.done) { const { columnWidthOverrides } = this.state; const columnIndexes = Object.keys(columnWidthOverrides); const incrementedIndexes = columnIndexes.map((index) => ({ [`${Number(index) + 1}`]: columnWidthOverrides[Number(index)] })); const incrementedColumns = incrementedIndexes.reduce((map, columnWidthOverrides) => ({ ...map, ...columnWidthOverrides }),{}); this.setState({ done: !this.state.done, columnWidthOverrides: { ...incrementedColumns } }); }

}

Mi problema actualmente es que, aunque la vista de selección tendrá correctamente los anchos de columna correctos, una vez que el usuario cambia la cuadrícula de nuevo al modo no seleccionado, los anchos deben volver al estado anterior, por ejemplo. {0: 400, 1: 500, 2: 600}. ¿Hay alguna manera de revertir el estado a un estado anterior? Intenté volver a configurarlo en la función componentWillMount, pero provoca un bucle infinito y se llama a setstate varias veces para romper automáticamente la aplicación.