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

您好，我正在尝试将我从Firebase获取的数据映射到一排卡片中。但是，由于我在

构造函数中定义了状态，因此会返回一张卡，开始时没有任何值。如何避免返回第一个空卡组件？提前感谢。

（卡组件是带有我导入的缩略图的组件）

类列表扩展组件{
建造师（道具）{
超级（道具）
this.db=firebase.database（）.ref（）.child（'app'）.child（'cards'）；
此.state={
卡片：[
{
id:“”，
cardDesc:“，
信用卡价格：“，
卡片标题：“，
}
]
}
}
组件将安装（）{
const previousCards=this.state.cards
this.db.on（'child_added'，snap=>{
推({
id:snap.key，
cardDesc:snap.val（）.cardDesc，
cardPrice:snap.val（）.cardPrice，
cardHeading:snap.val（）.cardHeading，
})
这是我的国家({
卡片：以前的卡片
})
})
}
render（）{
返回(
{this.state.cards.map（（card）=>{
返回（）
})
}
)
}
}
导出默认列表
在数据返回之前，无法延迟对渲染方法的调用，因此您可以检查cards.length您只需删除状态的初始设置，并将渲染方法更改为

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

谢谢你回答我的问题，但我想你误解了。我不想耽搁什么，我想从Firebase返回所有数据。但是使用这个
previousCards
方法，它将第一张卡片返回为空，然后返回带有数据的卡片。我是一个完全的初学者，我非常感谢你的建议。它会返回第一张空的卡片，因为当组件第一次渲染时，你的卡片数组是空的，当你在组件内部发出firebase请求时，它会装载组件，而不必等到数据返回后再渲染自己，它只是触发请求并呈现组件，当数据返回时，请求内部的回调被执行并更新状态，从而导致重新呈现，现在您的卡变得可见。您的意思是我在构造函数中删除了我的状态，并像这样创建了返回函数<代码>返回（{this.state.cards&&this.state.cards.map（（card）=>{return（）}）< /代码>是的，如果您没有任何原始状态，您将不会看到空白卡，如果您在呈现方法中检查“代码＞状态”。卡，将不显示“代码> >代码>组件，直到状态改变。当“代码”> DB 调用完成时，您的状态将改变，这将导致<代码>重新排序。er

，通过

卡

上的空检查，并呈现映射的

卡

数组。

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