Question

我有一个图像列表（更像一个图像库），默认显示4张图像，如果列表中的图像超过4张，则显示“显示更多”按钮。

一切正常。但是当我单击“显示更多”时，列表会闪烁（我认为它会重新呈现整个列表）。

我想防止这种不必要的眨眼。

GIF演示问题：https://media.giphy.com/media/RjrNH5MpSi5ebNCF6g/giphy.gif

export const ImageList: React.FC<IImageList> = (props: IImageList) => {
    const initLimit = 4;
    const [limit, setLimit] = useState(initLimit);
    const [showMore, setShowMore] = useState(false);
    const [displayImages, setDisplayImages] = useState(props.images.slice(0, limit));
    useEffect(() => {
        setDisplayImages(displayImages.concat(props.images.slice(initLimit, limit)));
    }, [limit]);

    return (
        <>
            <GridList cellHeight={props.cellHeight} cols={props.totalCols}>
                {displayImages.map((item, index) => {
                    let displayItem = item as IImageListItem;
                    if (!showMore && index === limit - 1 && props.images.length > limit) {
                        displayItem.showMoreCovered = true;
                        displayItem.showMoreLabel = 'Show more';
                        displayItem.showMoreClick = () => setLimit(props.images.length);
                    } else {
                        displayItem.showMoreCovered = false;
                    }
                    displayItem.index = index;
                    displayItem.imageClick = () => toggleModal(index);
                    return (
                        <GridListTile key={displayItem.id} cols={displayItem.cols} rows={displayItem.rows}>
                            {displayItem.showMoreCovered ? (
                                <div onClick={displayItem.showMoreClick}>
                                    <div>{displayItem.showMoreLabel}</div>
                                </div>
                            ) : null}
                            <img src={displayItem.src} className={classes.postImageEl} onClick={displayItem.imageClick}/>
                        </GridListTile>
                    );
                })}
            </GridList>
        </>
    );
};

Answer 1

尝试使用setState的功能形式：

 useEffect(() => {
        setDisplayImages(images => images.concat(props.images.slice(initLimit, limit)));
    }, [limit]);

在将新图像添加到列表后，防止重新渲染整个图像列表

1 个答案: