Warum wird mein Zustand in ReactJS zu oft gemappt?

Question

Hallo, ich versuche map meine Daten, die ich von meinem Firebase, in eine Reihe von Karten fechtete. Aber da ich den Zustand in meiner constructor definiert habe, wird eine Karte mit keinen Werten am Anfang zurückgegeben. Was kann ich tun, um die Rückgabe dieser ersten leeren Kartenkomponente zu vermeiden? Danke im Voraus.
(die Karte Komponente ist eine Komponente mit einem Thumbnail, die ich importiert)

class List extends Component { 
     constructor(props){ 
     super(props) 

     this.db = firebase.database().ref().child('app').child('cards'); 

     this.state = { 
      cards: [ 
       { 
       id: "", 
       cardDesc: "", 
       cardPrice: "", 
       cardHeading: "", 
       } 
      ] 
      } 
     } 

     componentWillMount(){ 
     const previousCards = this.state.cards 

     this.db.on('child_added', snap => { 
      previousCards.push ({ 
      id: snap.key, 
      cardDesc: snap.val().cardDesc, 
      cardPrice: snap.val().cardPrice, 
      cardHeading: snap.val().cardHeading, 
      }) 
      this.setState ({ 
      cards: previousCards 
      }) 
     }) 
     } 

     render(){ 
     return(
      <div className='list'> 
      <Row> 
      { this.state.cards.map((card) => { 
      return(<Card cardHeading={card.cardHeading} cardDesc={card.cardDesc} 
       cardPrice={card.cardPrice} key={card.id} />) 
       }) 
      } 
      </Row> 
      </div> 
     ) 
     } 
    } 

    export default List 

Answer 1

Sie können nur Ihre Ersteinrichtung für den Staat entfernen und Ihre Methode

Danke zu sagen, machen ändern

this.state.cards && this.state.cards.(your stuff) 

Answer 2

Es gibt keinen Weg, um die Berufung einer Render-Methode zu verzögern, bis die Daten zurückkommt, so können Sie entweder überprüfen, ob cards.length < 1 und nichts anzeigen oder einen Ladebildschirm anzeigen, bis diese Daten zurückkommen.