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() {
let guilds = this.state.guilds
guilds.map(guild => {
  console.log(guild)
  return <Guilds
          key={guild.id}
          guildFaction={guild.guildFaction} 
          guildServer={guild.guildServer}
          guildName={guild.guildName} 
          guildDesc={guild.guildDesc} />
})

}

获取Firestore数据

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

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

您的组件是Guild.js，但是您正在渲染<Guilds />
您将状态设置为posts，但是使用this.state.guilds渲染组件
您每次使用映射Firestore数据的方式都将状态覆盖到快照中的最后一个对象
您使用doc.id而不是doc.data().id在列表中设置了错误的ID
您没有映射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});
  })
}

Answer 4

尝试使用map函数，并在setState的回调函数中，尝试在更新后控制台记录您的状态：

guildInfo() {
  Fire.firestore().collection('guilds')
    .get()
    .then(snapshot => {
       const guilds = snapshot.map(doc => {
         return {
            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}, () => console.log(this.state))
      })
    })     
  })
}

如果在控制台日志中，您的状态附近有一个[i]符号，则表明该状态尚未就绪，因此是异步问题。不过，用map函数代替forEach可能已经有所帮助。

使用Firestore数据渲染React组件

4 个答案: