Неопределенные реквизиты из Firebase

Question

У меня есть данные, хранящиеся в Firebase, которые я хочу передать дочернему элементу. Проблема в том, что данные не определены в функции рендеринга после того, как второй или две секунды console.log покажет нужные данные. Когда я пытаюсь передать this.state.appetizers через props компоненту 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>