Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import "./App.css";
- import useMounted from "./useMounted";
- import ImageLoader from "./ImageLoader";
- import { image, key } from "./config";
- import { useEffect, lazy, Suspense, useState } from "react";
- const fetchData = () =>
- fetch(image(1), {
- headers: {
- Authorization: key,
- },
- });
- const ImageLazy = lazy(() => import("./Image"));
- function App() {
- const [images, setImages] = useState([]);
- const { init, isLoading, isError, data } = useMounted(true);
- useEffect(() => {
- init(fetchData());
- function observerScroll(e) {
- //const scroll = window.scrollY;
- console.log(images); // <--- el arreglo sale vacio []
- }
- window.addEventListener("scroll", observerScroll);
- return () => {
- window.removeEventListener("scroll", observerScroll);
- };
- }, []);
- useEffect(() => {
- data && setImages(data.photos); // <---- esto solo debe de ejecutarse una vez
- // por lo tanto `images` deberia de guardar los valores
- }, [data]);
- return (
- <>
- {isLoading && <p>Loading data...</p>}
- {isError && <p>A ocurred error</p>}
- <div className="massory">
- {images.map((p) => (
- <Suspense fallback={<ImageLoader />} key={p.id}>
- <ImageLazy {...p} />
- {/* <ImageLoader /> */}
- </Suspense>
- ))}
- </div>
- </>
- );
- }
- export default App;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement