Reactjs 异步Firebase引用和在react中引用所述引用值

我正在编写一个React web应用程序，其中我利用通过Firebase提取的数据，并希望根据提取的值填充一系列React对象

其思想是firebase拉入并使用可在子组件中引用的快照更新状态。问题是我尝试了各种尝试来加载firebase响应

我怀疑，在DevTools中，函数似乎没有启动的原因是，它只有在从服务器接收到异步响应后才会启动。。。但是，当TextItem中的代码触发时，它可能还没有更新，导致接收到的文本为null，并抛出一个错误

代码如下：

/* Intialization 
code 
here
*/ 

const dbTextRef = firebase.database().ref('blogs/');


export default class App extends React.Component{
    state = {
        TextList : null,
    }

    //Set listener on data

componentDidUpdate(){   
            dbTextRef.on('value', snapshot => {
        this.setState({
            TextList : snapshot
        });
    });
}
    //In render, pass the state of the div down as props to the

    render(){
        return(
            <div>
                <TextAddContainer TextArray = {this.state.TextList} />

            </div>

        );
    }    
}

export class TextAddContainer extends React.Component{
    constructor(props){
        super(props);

        this.RetrieveText = this.RetrieveText.bind(this);

    console.log("Props received in Text Container is: "+ props.TextArray);

    }

    //When loading or when a user adds new content, retrieve a list 
    //of all content from Firebase

    render(){
        return(
            <div>
                <Dropdown />
                <TextItem TextArray = {this.props.TextArray} />
                <button onClick = {this.RetrieveText}>Refresh</button>
            </div>
            );
    }
}

const TextItem = (props) => {
    console.log("Prop received in individual item is:" + props.TextArray);

    const TextArray = props.TextArray;
    console.log(TextArray);
    const TextValues = Object.values(TextArray[0]);
    var returnArray = [];

    for(let i = 0; i <= TextArray.length; i++){
        returnArray.push(<div key = {i}><p className = "CMSTextPreviewMenu">TextArray[0][i]</p></div>);
    }

    return returnArray;
} 

/*初始化
代码
在这里
*/ 
const dbTextRef=firebase.database（）.ref（'blogs/'）；
导出默认类App扩展React.Component{
状态={
TextList:null，
}
//在数据上设置侦听器
componentDidUpdate（）{
dbTextRef.on（'value'，快照=>{
这是我的国家({
文本列表：快照
});
});
}
//在渲染中，将div的状态作为道具传递给
render（）{
返回(
);
}    
}
导出类TextAddContainer扩展React.Component{
建造师（道具）{
超级（道具）；
this.RetrieveText=this.RetrieveText.bind（this）；
log（“文本容器中接收的道具为：”+Props.TextArray）；
}
//加载或用户添加新内容时，检索列表
//来自Firebase的所有内容的
render（）{
返回(
刷新
);
}
}
常量文本项=（道具）=>{
log（“在单个项目中收到的道具为：“+props.TextArray”）；
const TextArray=props.TextArray；
log（TextArray）；
const TextValues=Object.values（TextArray[0]）；
var returnArray=[]；
对于（让i=0；i我通过将侦听器放入构造函数并捕获尚未加载的值来解决此问题。谢谢大家！
您好，我来自FBI