Estoy tratando de obtener imágenes de una Unsplash API y luego intento actualizar los datos de las imágenes usando useState en el siguiente código.
const [images, setImages] = useState([]); useEffect(() => { Axios.get( "https://api.unsplash.com/photos/?client_id=l2U-D_PXXujBJoRiCCMCL2ifi_5ZJcK4AC0WH-A2lKk" ) .then((res) => { //res.data is printing correct/expected value console.log(res.data); setImages(res.data); console.log("lul"); //but images array is still empty console.log("images: ", [images]); // [] }) .catch((err) => console.error(err)); }, []);Si coloco la matriz de imágenes en la matriz de dependencia, entonces puedo actualizar la matriz de imágenes, pero luego la búsqueda se produce infinitamente.
¿Por qué está pasando esto?
Lo que está haciendo mal es que está intentando console.log antes de que React se haya vuelto a procesar. Actualizar un state a través del setState relacionado no es instantáneo, es una tarea asíncrona. Es necesario volver a renderizar para obtener el valor actualizado. Vea el código a continuación, agregué comentarios.
También es una mala idea poner
imagesen la matriz de dependencias, obtendrá un bucle infinito.
const [images, setImages] = useState([]); console.log("images: ", [images]); // you get [] for the first time, and after state change and re-render, it will contains the fetched data. useEffect(() => { Axios.get( "https://api.unsplash.com/photos/?client_id=l2U-D_PXXujBJoRiCCMCL2ifi_5ZJcK4AC0WH-A2lKk" ) .then((res) => { setImages(res.data); }) .catch((err) => console.error(err)); }, []);setState se invoca de forma asíncrona (aunque no devuelve una promesa, por lo que no puede await ).
Mantenga su useEffect como está ahora, y para imprimir el nuevo valor cada vez que cambien las images , puede usar otro useEffect :
useEffect(() => { console.log("images: ", [images]); // [] }, [images]);