libardorengifo

Arreglo se vacia en react

Jan 15th, 2021
669
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import "./App.css";
  2. import useMounted from "./useMounted";
  3. import ImageLoader from "./ImageLoader";
  4. import { image, key } from "./config";
  5. import { useEffect, lazy, Suspense, useState } from "react";
  6.  
  7. const fetchData = () =>
  8.   fetch(image(1), {
  9.     headers: {
  10.       Authorization: key,
  11.     },
  12.   });
  13.  
  14. const ImageLazy = lazy(() => import("./Image"));
  15.  
  16. function App() {
  17.   const [images, setImages] = useState([]);
  18.   const { init, isLoading, isError, data } = useMounted(true);
  19.  
  20.   useEffect(() => {
  21.     init(fetchData());
  22.     function observerScroll(e) {
  23.       //const scroll = window.scrollY;
  24.       console.log(images); // <--- el arreglo sale vacio []
  25.     }
  26.  
  27.     window.addEventListener("scroll", observerScroll);
  28.  
  29.     return () => {
  30.       window.removeEventListener("scroll", observerScroll);
  31.     };
  32.   }, []);
  33.  
  34.   useEffect(() => {
  35.     data && setImages(data.photos); // <---- esto solo debe de ejecutarse una vez
  36.                               // por lo tanto `images` deberia de guardar los valores
  37.   }, [data]);
  38.  
  39.   return (
  40.     <>
  41.       {isLoading && <p>Loading data...</p>}
  42.       {isError && <p>A ocurred error</p>}
  43.  
  44.       <div className="massory">
  45.         {images.map((p) => (
  46.           <Suspense fallback={<ImageLoader />} key={p.id}>
  47.             <ImageLazy {...p} />
  48.             {/* <ImageLoader /> */}
  49.           </Suspense>
  50.         ))}
  51.       </div>
  52.     </>
  53.   );
  54. }
  55.  
  56. export default App;
  57.  
RAW Paste Data