useEffect(() => { changeColumnsState(mapOrder({array: columnsState, order: columnOrder, key: 'name'})) }, [JSON.stringify(columnOrder)]) ¿Cuál es la mejor manera de verificar si la matriz cambió? No la longitud, sino el orden columnOrder es una matriz de números.
export const ColumnsCustomizeModalForm: FunctionComponent< ColumnsCustomizeModalFormProps > = ({ columns, onClose, modalProps }) => { const columnInitial = columns.map((column) => column.name) const [columnOrder, setColumnOrder] = useState<string[]>(columnInitial) const [columnsState, changeColumnsState] = useState(mapOrder({array: columns, order: columnOrder, key: 'name'})) useEffect(() => { changeColumnsState(mapOrder({array: columnsState, order: columnOrder, key: 'name'})) }, [JSON.stringify(columnOrder)]) const setColumnVisibility = (name: string) => { const newColumnsState = columnsState.map((column) => { if(column.name === name) { return {...column, isHidden: !column.isHidden} } return column }) changeColumnsState(newColumnsState) } return ( <ColumnsCustomizationModalView columns={columnsState} handleChangeOrder={setColumnOrder} handleColumnVisibility={setColumnVisibility} handleClose={onClose} modalProps={modalProps} /> ) } export const mapOrder = <ObjectType, KeyType extends keyof ObjectType>({array, order, key}: {array: ObjectType[], order: ObjectType[KeyType][], key: KeyType}) => { const sortedArray = array.sort( function (a, b) { var A = a[key], B = b[key]; if (order.indexOf(A) > order.indexOf(B)) { return 1; } else { return -1; } }); return sortedArray; };¿Cuál es la mejor manera de verificar si la matriz cambió?
La mejor manera es no comprobar en absoluto. No necesita ese estado de matriz columnOrder y una inicialización y un efecto que depende de él. Simplemente establezca directamente el orden de su matriz de estado de columnsState en la función del controlador:
export const ColumnsCustomizeModalForm: FunctionComponent< ColumnsCustomizeModalFormProps > = ({ columns, onClose, modalProps }) => { const [columnsState, changeColumnsState] = useState(columns); const setColumnOrder = (columnOrder: string[]) => { changeColumnsState(array => mapOrder({array, order: columnOrder, key: 'name'})) }; const setColumnVisibility = (name: string) => { changeColumnsState(cols => cols.map(column => { if (column.name === name) { return {...column, isHidden: !column.isHidden} } return column })); }; return ( <ColumnsCustomizationModalView columns={columnsState} handleChangeOrder={setColumnOrder} handleColumnVisibility={setColumnVisibility} handleClose={onClose} modalProps={modalProps} /> ); } También arregle su función mapOrder para crear una nueva matriz (y use la comparación correcta ):
export function mapOrder<ObjectType, KeyType extends keyof ObjectType>({array, order, key}: {array: ObjectType[], order: ObjectType[KeyType][], key: KeyType}) { return array.slice().sort((a, b) => // ^^^^^^^^ order.indexOf(a[key]) - order.indexOf(b[key]) ); }