Uso react-photoswipe-gallery para renderizar algunas imágenes para una página de portafolio. También hice una funcionalidad de desplazamiento infinito para que solo cargue 10 elementos inicialmente. Ahora funciona según el botón y agrega 10 elementos más al hacer clic, pero planeo cambiarlo para que se desplace. Todo funciona según lo previsto hasta este punto, así es como funciona la galería y el pergamino infinito:

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

Dado que habrá muchas imágenes, también me gustaría agregar un filtro de categoría usando la selección de reacción con isMulti habilitado. Por lo que he comprobado en la consola, me dirijo a las cosas correctas, la categoría está configurada correctamente. Solo funciona cuando no se selecciona nada, mostrando todas las imágenes de cualquier tipo de categoría. Una vez que selecciono una categoría, necesito hacer clic en el botón Cargar más y muestra todas las imágenes disponibles nuevamente, no por categoría.

 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 es una matriz simple con los nombres de las categorías.

galleryItems es una matriz de objetos estructurados de la siguiente manera:

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