javascript - Firebase 中未定义的 props

Question

我的数据存储在 Firebase 中，我想将其传递给子元素。问题是，在一两秒 console.log 显示所需数据后，渲染函数中的数据未定义。当我尝试通过 props 将 this.state.appetizers 传递给 MenuItem 组件时，错误提示 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
 })
};

Answer 1

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

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