Images are not loading when pulling them in from firebase firestore

[Lewis-Seekio]

Hi there, this probably isnt a problem with the repo, more me not understanding how to do this properly.

Here is where I pull in the product from firebase:

useEffect(() => {
        if (listingID === '') {
            window.alert("no id")
        } else {
            var docRef = db.collection("listings").doc(listingID);
            docRef.get().then((doc) => {
                if (doc.exists) {
                    setListing(doc.data());
                } else {
                    console.log("No such document!");
                }
            }).catch((error) => {
                console.log("Error getting document:", error);
            });
        }
    }, [])

And then I assign the photos from the product data to "images" and follow the object pattern that the carousel requires:

const [images, setImages] = useState([]);
useEffect(() => {
        if (listing.listingPhotos != null) {
            console.log("SETTING IMAGES");
            listing.listingPhotos.forEach(element => {
                var imageURL = {
                    src: element
                }
                setImages(images => [...images, imageURL]);
            });
        }
    }, [listing])

And then in my jsx:

return (
        <div className="listingPage">
            <div className="listingPage__main">
                <div className="listingPage__left"></div>
                <div className="listingPage__center">
                    <div className="listingPage__center__itemContainer">
                        <div class="listingPage__center__itemContainer__gridSection image">
                            <Carousel images={images} />
                        </div>
...

When the page loads, I can see that the images are in the carousel object, however it doesnt render them, so I'm guessing its rendering the carousel before it has the images ready? Im new to react so can anyone give me some guidance how to make it wait until the images are ready? Thanks!

[yifaneye]

Hi @Lewis-Seekio ! Thank you for bringing this issue up! 😄

I replicated the issue you are having locally. I then found that there is something wrong in the code, in line 5 of src/utils/useSlides.js.

I edited that file and tried locally and the issue is gone on my machine. I will get this issue fixed and publish a new version before this coming weekend. 👨🏻‍💻 I will notify you for the new version.

[Lewis-Seekio]

Awesome! love the carousel btw, really great work.

多谢！

[yifaneye]

Thank you for your appreciation!

不用谢！😊

[yifaneye]

Hi @Lewis-Seekio! I fixed this issue and published a new version. Please install this new version by npm install react-gallery-carousel@0.1.1 --save. In this version, I "fixed a bug where image URLs those are not known ahead of time cannot be placed into the carousel".

[Lewis-Seekio]

Hi @yifaneye, thanks for the reply! I have updated, Unfortunately it still isn't working :( the same problem persists.

[Lewis-Seekio]

My package.json:

{
    "name": "amazon-clone",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@material-ui/core": "^4.11.3",
        "@material-ui/icons": "^4.11.2",
        "@testing-library/jest-dom": "^5.11.10",
        "@testing-library/react": "^11.2.6",
        "@testing-library/user-event": "^13.1.1",
        "axios": "^0.21.1",
        "classnames": "^2.3.1",
        "firebase": "^8.3.2",
        "github": "^14.0.0",
        "react": "^17.0.2",
        "react-currency-format": "^1.0.0",
        "react-dom": "^17.0.2",
        "react-firebase-hooks": "^3.0.3",
        "react-gallery-carousel": "^0.1.1",
        "react-images-upload": "^1.2.8",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.3",
        "sass": "^1.32.8",
        "uuid": "^8.3.2",
        "web-vitals": "^1.1.1"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

[yifaneye]

Hi @Lewis-Seekio ! Thank you for trying the patch version! I am sorry to hear it still does not work for you! I made an example (example 3) at https://github.com/yifaneye/react-gallery-carousel/blob/master/example/src/App.js . Please try setImages at once in your useEffect hook i.e. setImages(listing.listingPhotos.map(image => ({ src: image });

Please see the following screen shot.

[Lewis-Seekio]

@yifaneye It works perfectly now! awesome!

谢谢你的帮助！