来自 Firebase 的未定义道具答案

【问题标题】：Undefined props from Firebase来自 Firebase 的未定义道具
【发布时间】：2019-01-14 03:11:08
【问题描述】：

我有存储在 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
 })
};

【问题讨论】：

您描述的行为听起来像是异步行为。无论您需要什么可变数据，在您阅读后都会得到解决。因此，您需要.then 或使用新的async/await，例如var myData = await myAsyncMethod

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

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

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

【讨论】：