带有类别过滤器和无限滚动的 React 图库

Question

I use react-photoswipe-gallery to render some images for a portfolio page. Also I made a infinite scroll functionality so it only loads 10 items initially. Now it works based on button and adds 10 more items onClick, but I plan to change it to scroll. Everything works as intended until this point, this is how the gallery and inifinite scroll works:

    const loadLimit = 10;
    const [galleryItems, setGalleryItems] = useState(
        galleryData.slice(0, loadLimit)
    );
    const [visibleItems, setVisibleItems] = useState(loadLimit);
    const [selectedOption, setSelectedOption] = useState([]);

    const loadMore = () => {
        const newVisible = visibleItems + loadLimit;
        const newItems = galleryItems.concat(
            galleryData.slice(visibleItems, newVisible)
        );

        setVisibleItems(newVisible);
        setGalleryItems(newItems);
    };

Since there will be a lot of images, I'd like to also add a category filter using react-select with isMulti enabled. From what I've checked in console I target the right things, the category is set correctly. It only works when nothing is selected - by showing every image from any type of category. Once I select a category I need to click the Load more button and it shows every image available again, not by category.

    useEffect(() => {
        if (selectedOption.length === 0)
            return setGalleryItems(galleryData.slice(0, loadLimit));

        const filteredData = galleryData
            .filter((item) => item.category === selectedOption.value)
            .slice(0, loadLimit);

        setGalleryItems(filteredData);
    }, [galleryItems, selectedOption]);

    <Select
        components={makeAnimated()}
        options={filterOptions}
        value={selectedOption}
        onChange={setSelectedOption}
        placeholder="Filter by category"
        isMulti
    />

selectedOptions is a simple array with the category names.

galleryItems is an array of objects structured like this:

    {
        source: imageSource,
        category: 'category-name'
    }

Answer 1

If that 1st if statement returns true, you'll receive the unfiltered images, and in that statement you're comparing against selectedOption.length but later using selectedOption.value . I suspect that's a bug, except (undefined === 0) equates to false, so there may be something else going on as well.

Also, it load more code is setting galleryItems without taking the filter into account. And when load more calls "setGalleryItems()" it may be triggering your useEffect() hook to run again which will then clobber the gallery.

Typically, the 'load next' code will just bump the page # and nothing else. The page number will be a dependency on the useState() hook (not the page data), and inside useState() hook populate the gallery with the right page data.