我從 jsonplaceholder（照片端點）獲取了一個包含 5k 個物件的陣列。我想使用 Material-UI 選擇按專輯 ID 對其進行排序。所以問題是狀態沒有正確顯示。當我選擇“desc”選項時，我的專案網格沒有被更新，但是當我將排序狀態降低到它的初始值時，重新渲染發生并且我得到一個按“desc”排序的訂單串列。
API鏈接：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>
))}
</>
此外，監聽filteredImages 更改的useEffect 不起作用。在filteredImages 改變它的值后，我沒有得到console.log。
UPD：按 Array.sort 默認排序也不起作用
uj5u.com熱心網友回復：
您可以使用 orderBy lodash對陣列進行排序，您還可以查看此答案：answer
在你的情況下，你可以像這樣寫 useEffect 方法
import {orderBy} from 'lodash'
React.useEffect(() => {
if (sort) {
setFilteredImages( orderBy(filteredImages, ['albumId'], ['desc']) );
} else {
setFilteredImages(images);
}
setPage(1);
/* eslint-disable-next-line */
}, [sort]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/337377.html
標籤：javascript 数组 反应 表现 排序