Obtengo una matriz de objetos de 5k de jsonplaceholder (punto final de fotos). Y quiero ordenarlo por albumId usando una selección de Material-UI. Entonces, el problema es que el estado no se muestra correctamente. Cuando elijo las opciones 'desc', mi cuadrícula de elementos no se actualiza, pero cuando cambio el estado de clasificación a su valor inicial, se vuelve a procesar y obtengo una lista ordenada por 'desc'.

Enlace API: fotos de marcador de posición json JSON

 const handleChangeSort = (e: SelectChangeEvent) => { const sort = e.target.value; setSort(sort); }; const handleClearSort = () => { setSort(''); }; React.useEffect(() => { if (sort) { const sortedImages = filteredImages.sort( byValue((i) => i.albumId, byNumber({ desc: sort === 'desc' })) ); setFilteredImages(sortedImages); } else { setFilteredImages(images); } setPage(1); /* eslint-disable-next-line */ }, [sort]); React.useEffect(() => { console.log('NEW FILTERED IMAGES', filteredImages); }, [filteredImages]); <> {!imagesLoading && (filteredImages.length ? ( <Grid container item spacing={5} xs={12}> {filteredImages .slice(itemsOnPage * (page - 1), page * itemsOnPage) .map((image: Image) => ( <Grid item xs={4} key={image.id}> <Card> <CardHeader title={image.title.slice(0, 20)} /> <CardMedia component="img" height="100%" image={image.thumbnailUrl} alt={image.title} /> <CardActions> <Button size="small" className={classNames(classes.btn, classes.deleteBtn)} > <DeleteIcon /> </Button> <Button size="small" className={classNames(classes.btn, classes.previewBtn)} > <PreviewIcon /> </Button> </CardActions> </Card> </Grid> ))} </Grid> ) : ( <Grid item> <Typography variant="body1">No images were found</Typography> </Grid> ))} </>

Además, el useEffect, que está escuchando el cambio de las imágenes filtradas, no funciona. No obtengo el archivo console.log después de que las imágenes filtradas cambien su valor.

UPD: la clasificación predeterminada por Array.sort tampoco funciona