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

【问题标题】：React gallery with category filter and infinite scroll带有类别过滤器和无限滚动的 React 图库
【发布时间】：2022-01-07 13:03:16
【问题描述】：

我使用 react-photoswipe-gallery 为投资组合页面渲染一些图像。我还做了一个无限滚动功能，所以它最初只加载 10 个项目。现在它基于按钮工作，并在单击时添加了 10 多个项目，但我计划将其更改为滚动。到目前为止，一切都按预期工作，这就是画廊和无限滚动的工作方式：

    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);
    };

由于会有很多图像，我还想添加一个使用 react-select 并启用 isMulti 的类别过滤器。从我在控制台中检查的内容来看，我的目标是正确的，类别设置正确。它仅在未选择任何内容时才有效 - 通过显示来自任何类型类别的每个图像。一旦我选择了一个类别，我需要点击加载更多按钮，它会再次显示每个可用的图像，而不是按类别。

    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 是一个包含类别名称的简单数组。

galleryItems 是一个对象数组，结构如下：

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

【问题讨论】：

标签： javascript arrays reactjs react-hooks

【解决方案1】：

如果第一个 if 语句返回 true，您将收到未过滤的图像，并在该语句中与 selectedOption.length 进行比较，但稍后使用 selectedOption.value。我怀疑这是一个错误，除了 (undefined === 0) 等于 false，所以可能还有其他事情发生。

此外，它加载更多代码是在不考虑过滤器的情况下设置 galleryItems。当加载更多调用“setGalleryItems()”时，它可能会触发你的 useEffect() 钩子再次运行，这将破坏画廊。

通常，“加载下一个”代码只会撞到页面 # 而不会发生其他任何事情。页码将依赖于 useState() 钩子（而不是页面数据），并且在 useState() 钩子中使用正确的页面数据填充图库。

【讨论】：