React画廊组件点击按钮无法正常加载更多图片问题求助

问题根源 #

你的代码核心问题在于状态设计和渲染逻辑不匹配：

• 你用visibleImages存储单张图片，但每个MDBRow循环会渲染6张图，导致每次点击加载更多时，实际是重复渲染了整行的旧图片，而非追加新内容。
• imagesPerPage = 1和实际每行6张的渲染量完全不匹配，逻辑错位。
• 通过index * 2 + n计算图片索引的方式混乱，会导致重复加载和索引越界。

修复方案 #

重新设计状态，跟踪当前显示的图片总数，按每行6张的规则分组渲染：

import React, { useState } from 'react';
import GridElem1 from '../assets/img/App/gallery/grid-row-1.jpg'
import GridElem2 from '../assets/img/App/gallery/grid-col-1.jpg'
import GridElem3 from '../assets/img/App/gallery/grid-row-2.jpg'
import GridElem4 from '../assets/img/App/gallery/grid-col-2.jpg'
import GridElem5 from '../assets/img/App/gallery/grid-col-3.jpg'
import GridElem6 from '../assets/img/App/gallery/grid-row-3.jpg'
import GridElem7 from '../assets/img/App/gallery/grid-row-4.jpg'
import GridElem8 from '../assets/img/App/gallery/grid-col-4.jpg'
import GridElem9 from '../assets/img/App/gallery/grid-col-5.jpg'
import GridElem10 from '../assets/img/App/gallery/grid-row-5.jpg'
import GridElem11 from '../assets/img/App/gallery/grid-row-6.jpg'
import GridElem12 from '../assets/img/App/gallery/grid-col-6.jpg'
import {
    MDBCol,
    MDBRow,
} from 'mdb-react-ui-kit';

const Gallery = () => {
    const allImages = [GridElem1, GridElem2, GridElem3, GridElem4, GridElem5, GridElem6, GridElem7, GridElem8, GridElem9, GridElem10, GridElem11, GridElem12];
    const imagesPerRow = 6; // 每行固定6张图
    const [visibleCount, setVisibleCount] = useState(imagesPerRow); // 初始显示第一行6张

    const showMoreImages = () => {
        // 每次追加一行的图片数量，不超过总数
        setVisibleCount(prev => Math.min(prev + imagesPerRow, allImages.length));
    };

    // 将可见图片按每行6张分组
    const getVisibleRows = () => {
        const visibleImages = allImages.slice(0, visibleCount);
        const rows = [];
        for (let i = 0; i < visibleImages.length; i += imagesPerRow) {
            rows.push(visibleImages.slice(i, i + imagesPerRow));
        }
        return rows;
    };

    return (
        <>
            {getVisibleRows().map((rowImages, rowIndex) => (
                <MDBRow key={rowIndex}>
                    <MDBCol lg={4} md={12} className='mb-4 mb-lg-0'>
                        <img
                            src={rowImages[0]}
                            className='w-100 shadow-1-strong rounded mb-4'
                            alt={`Image ${rowIndex * imagesPerRow + 1}`} />
                        <img
                            src={rowImages[1]}
                            className='w-100 shadow-1-strong rounded mb-4'
                            alt={`Image ${rowIndex * imagesPerRow + 2}`} />
                    </MDBCol>

                    <MDBCol lg={4} className='mb-4 mb-lg-0'>
                        <img
                            src={rowImages[2]}
                            className='w-100 shadow-1-strong rounded mb-4'
                            alt={`Image ${rowIndex * imagesPerRow + 3}`} />
                        <img
                            src={rowImages[3]}
                            className='w-100 shadow-1-strong rounded mb-4'
                            alt={`Image ${rowIndex * imagesPerRow + 4}`} />
                    </MDBCol>

                    <MDBCol lg={4} className='mb-4 mb-lg-0'>
                        <img
                            src={rowImages[4]}
                            className='w-100 shadow-1-strong rounded mb-4'
                            alt={`Image ${rowIndex * imagesPerRow + 5}`} />
                        <img
                            src={rowImages[5]}
                            className='w-100 shadow-1-strong rounded mb-4'
                            alt={`Image ${rowIndex * imagesPerRow + 6}`} />
                    </MDBCol>
                </MDBRow>
            ))}
            {visibleCount < allImages.length && (
                <button onClick={showMoreImages}>Показать еще</button>
            )}
        </>
    );
};

export default Gallery;

关键改动说明 #

1. 状态重构：用visibleCount跟踪当前显示的图片总数，替代原来的visibleImages数组，逻辑更清晰。
2. 分组渲染：通过getVisibleRows将可见图片按每行6张分组，确保每行渲染正确的图片，不会重复或越界。
3. 加载逻辑简化：showMoreImages直接追加一行的图片数量，用Math.min避免超出总图片数。
4. 索引修正：每行的图片索引基于行号计算，保证alt属性和图片来源准确。

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