Javascript 来自Firebase的未定义道具

我将数据存储在Firebase中，我希望将其传递给子元素。 问题是，在第二秒或两秒console.log显示所需数据后，渲染函数中的数据未定义。当我试图通过props向MenuItem传递this.state.apperizers时，组件错误表示props.menu未定义

 constructor(){
   super();
   this.state = {
     appetizers: {},
     desserts: {},
     salads: {},
     maindishes: {}
   }
 }

 componentDidMount(){
   db.collection('menu').get().then((snapshot) => {
     snapshot.docs.forEach(doc => {
       this.setState({
         appetizers: doc.data().Appetizers,
       });
     });
   }) ;
 }

 render(){
   const {item1, item2, item3, item4, item5, item6, item7, item8, item9, item10, item11, item12} = menu;
   console.log(this.state.appetizers.app1); //first log undefined, second is good
   return (
     <Fragment>
       <Navbar/>
       <section id="menu" className="section section__menu">
         <h1 className="heading mb-4">Menu</h1>
         <div className="row">
           <div className="col-lg-6 col-md-12">
             <article className="menu-section__container">
               <h2 className="menu-section__title">{item1.category}</h2>
               <ul className="menu-section__list">
                 <MenuItem menu={this.state.appetizers.app1}/>
                 <MenuItem menu={item2} />
                 <MenuItem menu={item3} />
               </ul>
             </article>
           </div>
           <div className="col-lg-6 col-md-12">
             <h2 className="menu-section__title">{item4.category}</h2>
             <ul className="menu-section__list">
               <MenuItem menu={item4}/>
               <MenuItem menu={item5} />
               <MenuItem menu={item6} />
             </ul>
           </div>

         </div>


const MenuItem = (props) => {
 //Destructing the object menu
 //console.log(props.menu);
 const {name, price, desc} = props.menu;

 return (
         <Fragment>
           <li className="menu-section__item">
             <h3>{name}</h3> <span>{formatPrice(price)}</span>
             <p className="menu-section-description">{desc}</p>
           </li>
         </Fragment>
 );
}

MenuItem.propTypes = {
 menu: PropTypes.shape({
   name: PropTypes.string.isRequired,
   desc: PropTypes.string.isRequired,
   price: PropTypes.number.isRequired
 })
};

构造函数（）{
超级（）；
此.state={
开胃菜：{}，
甜点：{}，
沙拉：{}，
主菜：{}
}
}
componentDidMount（）{
db.collection（'menu'）.get（）。然后（（快照）=>{
snapshot.docs.forEach（doc=>{
这是我的国家({
开胃菜：doc.data（）.开胃菜，
});
});
}) ;
}
render（）{
const{item1，item2，item3，item4，item5，item6，item7，item8，item9，item10，item11，item12}=菜单；
console.log（this.state.app1）；//第一个日志未定义，第二个很好
返回(
菜单
{item1.category}


{item4.category}


常量菜单项=（道具）=>{
//销毁对象菜单
//控制台日志（道具菜单）；
const{name，price，desc}=props.menu；
返回(

{name}{formatPrice（price）}
{desc}

);
}
MenuItem.propTypes={
菜单：PropTypes.shape({
名称：PropTypes.string.isRequired，
desc:PropTypes.string.isRequired，
价格：PropTypes.number.isRequired
})
};

错误是因为在执行数据库调用之前，组件一旦挂载渲染函数就会执行，并且您会收到错误。因此，在将数据传递给子组件之前，请使用条件检查数据是否未定义。当您获得数据时，整个组件都会重新提交，并且您的数据将被传递

<ul className="menu-section__list">
      {(this.state.appetizers.app1)?<MenuItem menu={this.state.appetizers.app1}/>:null}
       <MenuItem menu={item2} />
       <MenuItem menu={item3} />
 </ul>

{（this.state.app1）？：null}

您描述的行为听起来像是异步行为。您需要的任何变量数据都是在阅读后解析的。因此，您需要

。然后
或使用新的
async/await
，例如
var myData=await myasynchmethod