How to get state in react after render

Question

I am trying to fetch data from firebase. I am able to get the data and update the state, but state returns undefined after render in my React context Provider. I have tried to use some of the Life cycle method like componentWillMount or calling my fetchData function my the constructor function , since it get called before render, but none is working. Below is my code.

import React, { Component } from 'react';
import { dataDB, productDetail } from './data';
import { db } from './config/fbConfig'
import { TimerSharp } from '@material-ui/icons';

const ProductContext = React.createContext();
class ProductProvider extends Component {
    constructor(props) {
        super(props)
        this.state = {
            products: []
           
        }

        this.fetchData()

    }

       fetchData = () => {
        db.collection("projects")
            .get()
            .then(querySnapshot => {
                const data = querySnapshot.docs.map(doc => doc.data());
                console.log(data); //successfully returns the data
                // this.setState({ projects: data });
                this.setState(() => {
                    return {
                        projects: data
                    }
                })
                console.log(this.state.products) // successfully returns the data and update the state
            });
    }


    render() {
        console.log(this.state.products) // returns empty arr and I  need it to return the updated state with data
        return (
            <ProductContext.Provider value={{

                ...this.state
                
            }}>
                {this.props.children}
            </ProductContext.Provider>
        )

    }
}

const ProductConsumer = ProductContext.Consumer;
export { ProductProvider, ProductConsumer };

The issue is this.state.products get called before calling data in firebase. Please how can I be able to get data after render.

Answer 1

在fetchData()设置属性this.state.projects但在render记录this.state.products