0

Necesito que filtre en cada página de la API las fotos que pertenezcan a un determindao usario y que esos resultados se guarden en un estado.

En el código a continuación solo guarda el resultado de la última página.

const [collections] = useState(["wedding", "outdoors", "portraits", "travel", "pets", "christmas", "products", "halloween"]);
const [resulPhotos, setResultPhotos] = useState([]);
const [pages, setPages] = useState(1);

useEffect(() => {

    for (let j = 0; j < 7; j++) {
        for (let i = 0; i < 7; i++) {
            const url = `https://api.unsplash.com/search/photos?page=${i}&query=${collections[j]}&client_id=${accessKey}`
            axios.get(url).then((response) => {
                const photos = response.data.results.filter((item) => (
                    item.user.name === "Nathan Dumlao"
                )).map(item => item)
                setResultPhotos(photos)
            });
        }
    }
}, []);

1 respuesta 1

1

no entiendo para que necesitas 2 ciclos for si solo usas uno, pero respondiendo a tu pregunta, lo que pasa es que en cada iteración estás reasignando un nuevo arreglo a tu variable state, en todo caso, debes acumularlo, en otro arreglo, podrías usar algo como lo siguiente:

const {
  useState,
  useEffect
} = React;

let arreglo = [
  ["Photo 1", "Photo 2", "Photo 3"],
  ["Photo 4", "Photo 5", "Photo 6"],
  ["Photo 7", "Photo 8", "Photo 9"],
];

function Test() {
  const [arregloAcumulado, setArregloAcumulado] = useState([]);

  useEffect(() => {
    let arregloAcumulado = [];
    for (let i = 0; i < arreglo.length; i++) {
      arregloAcumulado = [...arregloAcumulado, ...arreglo[i]];
    }

    setArregloAcumulado(arregloAcumulado);
  }, []);

  return ( <
    div > {
      arregloAcumulado.map((x) => ( <
        p > {
          x
        } < /p>
      ))
    } <
    /div>
  );
}

ReactDOM.render( < Test / > , document.getElementById('root'));
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="root"></div>

En ese código un breve ejemplo de como acumular los resultados de un arreglo, luego al final de tu iteración haces un setResultPhotos(nuevoArreglo) y eso es todo.

3
  • Entiendo, pero cómo haría eso mismo con react hooks?
    – Maco Acero
    el 29 dic. 2022 a las 5:04
  • No se trata de que sea react o no, al final es javascript, en tu caso basicamente lo que tienes que hacer es crear un arreglo antes de tu for, luego acumular los valores como en el ejemplo en la linea que tienes setResultPhotos(photos) y después del for, sería setResultPhotos(arregloAcumulado) el 29 dic. 2022 a las 18:04
  • Edité la respuesta con un ejemplo de "hooks", es una implementación similar a lo que haces donde arreglo[i] sería la respuesta de tu api. el 29 dic. 2022 a las 18:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.