Tengo un estado de uso de la siguiente manera:

 const [drivers, setDrivers] = useState(useSelector(selectFilteredDrivers));

Aquí, los controladores son una matriz que podemos mapear.

Tengo una función de clasificación que ordena la lista de controladores:

 const sortDrivers = useCallback( (sortBy: string) => { const sortFunction = ( a: DeliveryDriver, b: DeliveryDriver, sort: string, ) => { if (sortBy === 'desc') { return Number(a.isAvailable) - Number(b.isAvailable); } else { return Number(b.isAvailable) - Number(a.isAvailable); } }; const sortedListOfDrivers = drivers.sort((a, b) => sortFunction(a, b, sortBy), ); console.log('sortedList', sortedListOfDrivers); setDrivers(sortedListOfDrivers); }, [drivers], );

Como puede ver, ordeno la lista y configuro la lista en sortedListOfDrivers. A continuación, mapeo a través de la lista de controladores para devolver el componente del controlador para cada controlador:

 const rows = drivers.map(driver => ( <Driver driver={driver} key={driver.driverId} handleRowOnClick={driverDetailClickHandler} />

));

Si se está preguntando, las filas son algo que paso al componente Table como apoyo.

 render ( <Table headers={headers} rows={rows} /> )

La función se transmite como una devolución de llamada y se adjunta a onClick.
Cuando los controladores de console.log después de la clasificación, muestran que la matriz de controladores se actualiza en consecuencia después de hacer clic, por lo que la funcionalidad de clasificación funciona muy bien detrás de escena.

El problema es que en la interfaz de usuario, mi lista sigue siendo la misma (como antes de ordenar) y no vuelve a representar la lista para ordenarla después del clic.

NOTA: No estoy seguro de si tiene algo que ver con el problema, pero por algún motivo, la interfaz de usuario se actualiza para mostrar una lista ordenada cuando empiezo a escribir algo en el campo de entrada que no tiene nada que ver con la función de clasificación.

¿Cómo hago para que actualice la lista de controladores cuando se ejecuta la función (se hace clic en el botón)?

Intenté colocar mi parte de mapeo en useEffect(). No funcionó.

Cualquier sugerencia es apreciada.