使用Fi还原数据呈现React组件

Question

我正在尝试用来自Firestore的数据来呈现我的Guild组件。我将来自Firestore的数据作为数组放入到我的状态中，然后当我调用组件并尝试呈现它时，什么都不会显示。我想要相信，我在这里做了一些非常错误的事情(一直没有和React一起工作很长时间)，但是我没有收到任何错误或警告，所以我不确定到底发生了什么。

Guilds.js

<Col>
    <Card>
      <CardBody>
        <CardTitle className={this.props.guildFaction}>{this.props.guildName}</CardTitle>
        <CardSubtitle>{this.props.guildServer}</CardSubtitle>
        <CardText>{this.props.guildDesc}</CardText>
      </CardBody>
    </Card>
  </Col>

呈现函数

renderCards() {
var guildComp = this.state.guilds.map(guild => {
  console.log(guild)
  return <Guilds
          key={guild.id}
          guildFaction={guild.guildFaction} 
          guildServer={guild.guildServer}
          guildName={guild.guildName} 
          guildDesc={guild.guildDesc} />
 })
return <CardDeck>{guildComp}</CardDeck>
}

获取固定恢复数据

guildInfo() {
Fire.firestore().collection('guilds')
  .get().then(snapshot => {
    snapshot.forEach(doc => {
      this.setState({
        guilds: [{
          id: doc.id,
          guildDesc: doc.data().guildDesc,
          guildFaction: doc.data().guildFaction,
          guildName: doc.data().guildName,
          guildRegion: doc.data().guildRegion,
          guildServer: doc.data().guildServer
        }]
      })
      console.log(doc.data().guildName)
    })
  })
}

更新:解决了，修复在呈现函数中。

Answer 1

好吧，你用的是州“公会”，但你更新州“职位”，还是我错过了什么？

Answer 2

我在这里看到的东西很少：

1. 您的组件是Guild.js，但您正在呈现<Guilds />。
2. 您正在将状态设置为posts，但使用this.state.guilds呈现组件
3. 您每次都要将该状态重写到快照中的最后一个对象，并使用映射Fi还原数据的方式。
4. 使用doc.id而不是doc.data().id设置列表中的in是错误的
5. 您不需要映射要呈现的guilds。公会是一个行会对象数组，所以您应该做一些类似于guilds.map(guild => { return <Guild /> }的事情。

这些都是一些需要修复的东西，然后在呈现之前尝试使用console.log(this.state.guilds)，看看是否获得了正确的数据。

Answer 3

我认为您的问题是，由于setState是异步的，所以当它实际设置状态doc时，状态已不再定义。先尝试创建数组，然后在循环外调用setState，即：

guildInfo() {
Fire.firestore().collection('guilds')
  .get().then(snapshot => {
     let guilds = []
     snapshot.forEach(doc => {
       guilds.push({
          id: doc.id,
          guildDesc: doc.data().guildDesc,
          guildFaction: doc.data().guildFaction,
          guildName: doc.data().guildName,
          guildRegion: doc.data().guildRegion,
          guildServer: doc.data().guildServer
       });
     })
     this.setState({guilds});
  })
}