在 React Gallery 组件中单击按钮时无法显示其他图像

Question

我有一个 React Gallery 组件，它最初显示一定数量的图像。单击按钮时，我希望组件显示其他图像。但是，我当前的实现并未按预期工作。代码如下：

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 imagesPerPage = 1;
    const [visibleImages, setVisibleImages] = useState(allImages.slice(0, imagesPerPage));
    const showMoreImages = () => {
        const currentVisibleCount = visibleImages.length;
        const newVisibleImages = allImages.slice(currentVisibleCount, currentVisibleCount + imagesPerPage);
        const uniqueNewVisibleImages = newVisibleImages.filter(img => !visibleImages.includes(img));
        setVisibleImages((prevVisibleImages) => [...prevVisibleImages, ...uniqueNewVisibleImages]);
    }
    // console.log(visibleImages);
    // visibleImages.map((img, index) => {
    //     console.log(allImages[index]);
    // })

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

                        <img
                            src={allImages[index * 2 + 1]}
                            className='w-100 shadow-1-strong rounded mb-4'
                            alt={`Image ${index * 2 + 2}`} />
                    </MDBCol>

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

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

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

                        <img
                            src={allImages[index * 2 + 5]}
                            className='w-100 shadow-1-strong rounded mb-4'
                            alt={`Image ${index * 2 + 6}`} />
                    </MDBCol>
                </MDBRow>

            ))}
            {visibleImages.length < allImages.length && (
                <button onClick={showMoreImages}>Показать еще</button>
            )}
        </>
    );
}

export default Gallery;

我尝试在

Gallery

组件中实现“显示更多”功能。但是，附加图像无法正确显示。我预计单击“显示更多”按钮会将更多图像附加到现有图像中。

Answer 1

我不太确定这是否是一个原因，但对独特图像进行了不必要的过滤：过滤独特图像的行可能不是必需的。由于您是根据当前可见图像的数量对

allImages

数组进行切片，因此您添加的新图像应该是唯一的，并且不存在于

visibleImages

数组中。可以删除这一行以简化代码：

const uniqueNewVisibleImages = newVisibleImages.filter(img => !visibleImages.includes(img));

您可以在

newVisibleImages

通话中直接使用

setVisibleImages

。

另一个可能的选择：您是否尝试过在没有该网格（mdbcols 和行）的情况下实现您的逻辑？ 我认为问题在于 keys 必须用于图像而不是网格行，因为您对图像数组进行切片，然后将它们渲染出来。 我想你可以尝试这样的事情：

const Gallery = () => {
const allImages = [GridElem1, GridElem2, GridElem3, GridElem4, GridElem5, GridElem6, GridElem7, GridElem8, GridElem9, GridElem10, GridElem11, GridElem12];
const imagesPerPage = 1;
const [visibleImages, setVisibleImages] = useState(allImages.slice(0, imagesPerPage));

const showMoreImages = () => {
    const currentVisibleCount = visibleImages.length;
    const newVisibleImages = allImages.slice(currentVisibleCount, currentVisibleCount + imagesPerPage);
    setVisibleImages(prevVisibleImages => [...prevVisibleImages, ...newVisibleImages]);
};

return (
    <div>
        {visibleImages.map((ImageComponent, index) => (
            <ImageComponent key={index} />
        ))}
        <button onClick={showMoreImages}>Next slide</button>
    </div>
);

};