Estoy tratando de manejar una función de clasificación que alterna entre dsc y asc. También necesita manejar un cierto nombre de columna de tabla que se conoce como "encabezado". El resultado esperado es ordenar "días" o "estación" y alternar por separado entre dsc y asc.
handleClick={(val: any, header: string) => val((val: any) => { const result = [...val].sort((a: any, b: any) => { return sortOrder === 'asc' ? header === 'Station' ? b.station - a.station : b.days - a.days : header === 'Station' ? a.station - b.station : a.days - b.days; }); setSortOrder(sortOrder === 'asc' ? 'dsc' : 'asc'); return result; }) }Esta es mi estación de función actual filtra correctamente pero "Días desde el último evento" no parece funcionar.
Esta es la manijaHaga clic en la función secundaria
onClick={() => props.handleClick(setFilteredData, header)}Esta es la muestra de los datos.
[ { days: 23, station: "Braidwood", }, { days: 18, station: "Byron", }, { days: 28, station: "Byron", }, { days: 32, station: "Calvert Cliffs", }, { days: 20, station: "Dresden", }, { days: 320, station: "Dresden", }, ]; Tal como está escrito, su controlador clasifica una copia de los filteredData y luego cambia el orden de clasificación. Esto significa que el orden real siempre se invierte desde el estado de sortOrder actual.
Si tuviera que adivinar, diría que se supone que el controlador onClick el orden de clasificación, y luego desea que se recurra al estado filteredData .
El controlador onClick debe alternar el estado, y el recurso se puede realizar en un useEffect con una dependencia del orden de sortOrder y el estado del header .
React.useEffect(() => { setFilteredData(data => data.slice().sort((a: any, b: any) => { return sortOrder === 'asc' ? header === 'Station' ? b.station - a.station : b.days - a.days : header === 'Station' ? a.station - b.station : a.days - b.days; })); }, [header, sortOrder]); const toggleSortOrder = (header: string) => () => { setSortOrder(sortOrder === 'asc' ? 'dsc' : 'asc'); setSortHeader(header); }; ... handleClick={toggleSortOrder(header)}Además, dado que la funcionalidad ascendente/descendente es básicamente la misma, sugeriría convertir el comparador de clasificación en una función de orden superior que intercambie las entradas y devuelva una función de comparación más simple.
const customSort = (sortOrder = 'asc', header = 'Station') => { const comparator = (a: any, b: any) => header === 'Station' ? b.station - a.station : b.days - a.days; return sortOrder === 'asc' ? comparator : (a, b) => comparator(b, a); } React.useEffect(() => { setFilteredData(data => data.slice().sort(customSort(sortOrder, header))); }, [header, sortOrder]);