为什么我的状态在 ReactJS 中被映射了太多次？

Question

您好，我正在尝试 map 我从 Firebase 获取的数据，放入一排卡片中。但是因为我在 constructor 中定义了状态，所以一开始返回的一张卡片没有任何值。我该怎么做才能避免返回第一个空卡片组件？提前致谢。
（卡片组件是我导入的带有缩略图的组件）

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

无法在数据返回之前延迟渲染方法的调用，因此您可以检查 cards.length <1 并且在数据返回之前不显示任何内容或显示加载屏幕.

Answer 2

您可以删除状态的初始设置并将渲染方法更改为

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

为什么我的状态在 ReactJS 中被映射了太多次？

Why is my state getting mapped one too many times in ReactJS?

javascript

firebase

ecmascript-6

reactjs

reactfire