React variable not defined

Question

I'm doing a react/firebase course and following the instructor code as below. I looked for any typo errors and not sure why im getting the

images is not defined error

componentDidMount() {
        this.getImages()
    }   

    getImages = async() => {
            let imagesInRTDB = firebase.database().ref('classification/newPhotos').orderByChild('viewed').equalTo(false)

            await imagesInRTDB.on('value',(snapshot) => {
                let images = []
                snapshot.forEach((childSnapshot) => {
                    let childKey = childSnapshot.key
                    let childData = childSnapshot.val();

                    childData.rtdbkey = childKey
                    images.push(childData)
                })
            })

            
            if(images.length > 0) {
                this.setState({
                    imagesThatNeedInference: images,
                    nextImage: [images.length - 1],
                    currentImageFb: images[images.length - 1].url
                })
            }
    }

Move `let images = []` outside the `onValue` callback scope. Voting to close as "Not reproducible or was caused by a typo". — Drew Reese, Jul 24 '21 at 07:17
ok that worked. but why did the instructor define images within the callback and not get any error? — Jag99, Jul 24 '21 at 07:19
Or they put the `if(images.length>0)` code block inside the firebase callback. — Tsvetan Ganev, Jul 24 '21 at 07:21
Using `await` here doesn't make sense, since [`.on()`](https://firebase.google.com/docs/reference/node/firebase.database.Query#on) doesn't return a promise, which means that your if-statement will be evaluated before your images array has been populated (you'll need to move if(images.length > 0) into the callback like Tsvetan mentioned) — Nick Parsons, Jul 24 '21 at 07:27
I agree with @NickParsons, there's nothing to await for, I think the `if (images.length)` block belongs in the callback. — Drew Reese, Jul 24 '21 at 07:28
yeah later in the video, the instructor got the same error and moved the if block in the callback. — Jag99, Jul 24 '21 at 07:33

score 3 · Accepted Answer · answered Jul 24 '21 at 07:19

You have to declare an image variable like this. Please try this.

componentDidMount() {
        this.getImages()
    }   

    getImages = async() => {
            let imagesInRTDB = firebase.database().ref('classification/newPhotos').orderByChild('viewed').equalTo(false)
            let images = []
            await imagesInRTDB.on('value',(snapshot) => {
                
                snapshot.forEach((childSnapshot) => {
                    let childKey = childSnapshot.key
                    let childData = childSnapshot.val();

                    childData.rtdbkey = childKey
                    images.push(childData)
                })
            })

            
            if(images.length > 0) {
                this.setState({
                    imagesThatNeedInference: images,
                    nextImage: [images.length - 1],
                    currentImageFb: images[images.length - 1].url
                })
            }
    }

Please check this URL, it will be helpful. https://www.w3schools.com/js/js_let.asp — Boris, Jul 24 '21 at 07:22

React variable not defined

1 Answers1