Javascript 如何在渲染后反应中获取状态

我正在尝试从firebase获取数据。我能够获取数据并更新状态，但状态在我的React上下文提供程序中呈现后返回undefined。我尝试过使用一些生命周期方法，比如componentWillMount或调用fetchData函数my constructor函数，因为它在渲染之前被调用，但都不起作用。下面是我的代码

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 };

import React，{Component}来自'React'；
从“/data”导入{dataDB，productDetail}；
从“./config/fbConfig”导入{db}
从“@material ui/icons”导入{TimerSharp}；
const ProductContext=React.createContext（）；
类ProductProvider扩展组件{
建造师（道具）{
超级（道具）
此.state={
产品：[]
}
this.fetchData（）
}
fetchData=（）=>{
db.收集（“项目”）
.get（）
.然后（querySnapshot=>{
const data=querySnapshot.docs.map（doc=>doc.data（））；
console.log（data）；//成功返回数据
//this.setState（{projects:data}）；
此.setState（（）=>{
返回{
项目：数据
}
})
console.log（this.state.products）//成功返回数据并更新状态
});
}
render（）{
console.log（this.state.products）//返回空的arr，我需要它返回带有数据的更新状态
返回(
{this.props.children}
)
}
}
const ProductConsumer=ProductContext.Consumer；
导出{ProductProvider，ProductConsumer}；

---

问题是在调用firebase中的数据之前调用了this.state.products。请告诉我如何在渲染后获取数据。

在

fetchData（）

中设置属性

this.state.projects

，但在

render

中记录

this.state.products
在第一次渲染时，它还不会加载您的数据（因为您的提取是一个异步过程），因此，您必须验证是否实际加载了数据（验证它是否为null、空或默认值）。另外，在最佳实践方面，您应该在
componentDidMount（）
lifetime方法中获取数据，而不是在构造函数中获取数据。您的初始状态是{products:[]}，但随后使用{projects:someData}对其进行更新
products
未更新。@Icepickle，如果它已接收到数据，我实际上已对其进行了验证，但返回null没有帮助，因为我需要在其他组件中将状态作为全局变量。我还在componentDidMount（）中调用了fetchData，但相同issue@windowsill当我控制台记录调用fetchData时的状态时，产品实际上已经更新，但产品在渲染后返回空数组，这就是我需要它的地方，以便将其作为全局变量传递给其他组件。这是一个输入错误，但状态在渲染后仍然返回空产品