React实现数组所有项加载完成后隐藏Load More按钮

你不需要额外维护hide状态，直接通过现有visible状态和数组长度的对比就能实现需求。你的错误在于多余的状态管理，以及错误地将setHide（状态更新函数）用作条件判断，这完全不符合React的状态使用逻辑。

正确实现方式 #

核心思路：仅当visible的值小于blogs数组的总长度时，才渲染Load More按钮，否则不渲染。

修改后的完整代码如下：

const blogs = [
    {src: "/blog1.png"},
    {src: "/blog2.png"},
    {src: "/blog3.png"},
    {src: "/blog4.png"},
    {src: "/blog5.png"},
];

const Thumbnails = ({ image, index = 0}) => {
    return (
        <Thumbnail className={`Thumbnail image${index}`}>
            <Image src={image.src} />
        </Thumbnail>
    )
}

function BlogMain() {
    const [visible, setVisible] = useState(3);
    const loadMore = () => {
        // 限制visible不超过数组总长度，避免逻辑冗余
        setVisible((prevValue) => Math.min(prevValue + 3, blogs.length));
    };

    return (
        <div>
            <Container>
                {blogs?.slice(0, visible).map((image, index) => (
                    <Thumbnails key={index} image={image} index={(index + blogs.length)} />
                ))}
            </Container>

            {/* 仅当未显示所有项时渲染按钮 */}
            {visible < blogs.length && (
                <Button onClick={loadMore}>
                    <ButtonText>Load more</ButtonText> 
                </Button>
            )}
        </div>
    );
}

关键说明 #

1. 按钮渲染条件：使用visible < blogs.length && <Button/>这种React短路求值语法——当条件为true时渲染按钮；当所有项都已显示（条件为false）时，不渲染任何内容。
2. 优化loadMore函数：添加Math.min(prevValue + 3, blogs.length)，确保visible不会超出数组总长度，避免不必要的状态更新。

内容的提问来源于stack exchange，提问作者gypsyS0ul