es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Galería interactiva con filtro de categorías y desplazamiento infinito.

06 Aug, 2023 Programación

Utilizo react-photoswipe-gallery para renderizar algunas imágenes en una página de portafolio. También creé una funcionalidad de desplazamiento infinito para que solo se carguen 10 elementos inicialmente. Ahora funciona mediante un botón y carga 10 elementos más al hacer clic, pero planeo cambiarlo para que funcione mediante desplazamiento. Todo funciona como se espera hasta este punto, así es como funcionan la galería y el desplazamiento 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, me gustaría agregar también un filtro de categoría utilizando react-select con isMulti habilitado. Según lo que he verificado en la consola, estoy apuntando a las cosas correctas, la categoría se establece 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, debo 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]);

selectedOptions es un simple array con los nombres de las categorías.

galleryItems es un array de objetos estructurado de la siguiente manera:

    {
        source: imageSource,
        category: 'nombre-de-la-categoría'
    }
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema con el filtro de categoría es que solo se aplica cuando el componente se carga por primera vez, y no cuando el usuario selecciona una categoría. Para solucionar esto, debes agregar la lógica del filtro de categoría a la función loadMore, de modo que se aplique tanto a la carga inicial como a las cargas posteriores.

    Puedes hacer esto modificando la función loadMore para filtrar los datos por categoría, si se ha seleccionado una categoría, antes de agregar los nuevos elementos al estado galleryItems. Aquí tienes un ejemplo de cómo puedes modificar la función loadMore:

    const loadMore = () => {
  const newVisible = visibleItems + loadLimit;
  let newItems = galleryData.slice(visibleItems, newVisible);
  if (selectedOption.length > 0) {
    newItems = newItems.filter(item => item.category === selectedOption.value);
  }
  newItems = galleryItems.concat(newItems);

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

    Esta función loadMore modificada primero verifica si se ha seleccionado una categoría, y si es así, filtra los elementos para incluir solo aquellos con la categoría seleccionada. Luego concatena los nuevos elementos con los galleryItems existentes y actualiza el estado como antes.

    Con esta modificación, el filtro de categoría debería aplicarse correctamente después de que el usuario seleccione una categoría y haga clic en el botón “Cargar más”.

Comments are closed.