0

I am trying to display data retrieved from a sub-collection in firebase for my react app. I do know that there are other answers in stackoverflow. But the solutions does not help me in my scenario, like useState set method not reflecting change immediately.

As mentioned, I need to attain the data before the rendering of the page to prevent the page being loaded without the data. Shown in my getPortfolioData() this was not an issue and the data was set and displayed when the page load. But this was not the case for getImageData().

I tried the following below, and the outcome is that the data is only set after a repetition of 4-5 times on average, but it sets in the console but the display doesn't show it. But what I need is for it to be set and then render the display.

useEffect(() => { 
        getPortfolioData(); 
        getImageData(); 
    }, [imageData])

Main Codes:

function getImageData() { 
        setLoading(true); 
 
        database.portfolioRef 
            .doc(portfolioId) 
            .collection("images") 
            .get() 
            .then((snapshot) => { 
                const imageItems = []; 
                snapshot.docs.map((doc) => { 
                    console.log(doc.data()); 
                    imageItems.push(doc.data()); 
                }); 
                 
                console.log(imageItems); 
                setImageData(imageItems); 
                console.log(imageData); 
            }).catch((e) => console.log(e)); 
         
        setLoading(false); 
    } 
 
    function getPortfolioData() { 
        database.portfolioRef 
        .doc(portfolioId) 
        .get() 
        .then((snapshot) => { 
            console.log(snapshot.data()); 
            setPortfolioData(snapshot.data()) 
            setLastModifiedBy(snapshot.data().lastModifiedBy) 
            setlastModifiedDate(snapshot.data().lastModifiedDate) 
        }).catch((e) => console.log(e)); 
    } 
 
    useEffect(() => { 
        getPortfolioData(); 
        getImageData(); 
    }, [])

This is the console log

SOLVED (Answer below)

async function getVideoData() { 
        setLoading(true); 
        setVideoMessage("") 
 
        try { 
            const snapshot = await database.portfolioRef.doc(portfolioId).collection("videos").get(); 
            if (snapshot !== null) { 
                var videoItems = []; 
 
                snapshot.docs.map((doc) => { 
                    console.log(doc.data()); 
                    videoItems.push(doc.data()); 
                }); 
 
                setVideoData(videoItems); 
            } else { 
                setVideoMessage("There is not existing videos for this portfolio.") 
                console.log("else" + videoMessage); 
            } 
        } catch { 
            setVideoMessage("There is not existing videos for this portfolio.") 
            console.log("catch" + videoMessage); 
        } 
 
        setLoading(false); 
    }
der
  • 69
  • 7
  • React state updates are not immediately processed. Can you be more specific about what isn't working? Can you edit your question to include a [minimal, complete, and reproducible code example](https://stackoverflow.com/help/minimal-reproducible-example) for what you are trying to do that isn't covered in the marked duplicate? – Drew Reese Apr 05 '22 at 06:47
  • Hi @DrewReese, the issue is the data is not being set immediately when I use the setImageData() useState(). As shown in the picture, If I console log the temp array the data is there with 2 objects but after I set the data and console log the imageData state, I get empty. – der Apr 05 '22 at 06:50
  • Ok, so yeah, that's what the duplicate covers. You say it doesn't help you so please explain *how* this question isn't a duplicate. What is different? – Drew Reese Apr 05 '22 at 06:56
  • I need to attain the data before the rendering of the page to prevent the page from being loaded without the data. Shown in my getPortfolioData() this was not an issue and the data was set and displayed when the page load. But this was not the case for getImageData(). I tried the following below, and the outcome is that the data is only set after a repetition of 4-5 times on average. But what I need is for it to be set and then render the display. I have also updated the question – der Apr 05 '22 at 07:17
  • If you need wait for the data to render then typically you use [conditional rendering](https://reactjs.org/docs/conditional-rendering.html) to either (A) render a loading indicator while the data is fetched, or (B) render nothing until the data is fetched and the state is populated. – Drew Reese Apr 05 '22 at 07:20
  • Hi @DrewReese, Thank you for answering! I managed to solve it on my side already after numerous debugging! I left my solution in the question. – der Apr 05 '22 at 08:05

0 Answers0