使用 Firestore 数据渲染 React 组件答案

【问题标题】：Render React component using Firestore data使用 Firestore 数据渲染 React 组件
【发布时间】：2019-07-12 21:11:24
【问题描述】：

我正在尝试使用 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>
}

获取 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)
    })
  })
}

更新：已解决，修复在渲染函数中。

【问题讨论】：

你能分享你从fire store获取数据的代码吗？也许是响应的控制台日志？
@WilliamChou 对不起，我写这篇文章的速度很快，继续寻找我缺少的东西。显然在这里发布太长了，所以我必须将其发布在粘贴箱中。编辑：pastebin.com/Lw4XGNJ4
代码是否曾到达then 的内部？如果有，snapshot 中是否有数据？ console.log() 是否打印任何内容？
@FrankvanPuffelen 是的，它打印出数据库中仅有的 2 列。能拿到数据，就是不能让公会组件渲染
嗯，好的。如果调用 setState() 时使用了数据库中的正确数据，恐怕我不是最适合提供帮助的人。

标签： javascript reactjs google-cloud-firestore render jsx

【解决方案1】：

嗯，你使用状态“公会”但你更新状态“帖子”或者我错过了什么？

【讨论】：

是的，这是我的拼写错误，我已修复，但仍然无法正常工作。

【解决方案2】：

我在这里看到了一些东西：

你的组件是Guild.js，但是你正在渲染<Guilds />
您将状态设置为posts，但使用this.state.guilds 来渲染组件
您每次都将该状态片段覆盖到快照中的最后一个对象，使用映射 Firestore 数据的方式
您使用doc.id 而不是doc.data().id 错误地设置了列表中的ID
您没有将guilds 映射到渲染。 guilds 是一个公会对象数组，所以你应该做类似guilds.map(guild => { return <Guild /> }

这几件事要修复，然后在渲染前尝试console.log(this.state.guilds)，看看是否得到正确的数据

【讨论】：

#1：错字，实际上是源代码中的 Guilds.js // #2：也是错字，已修复，没有任何改变。 // #3: 我在 Firestore 中有 2 个文档，它们都在调用时正确存储。 // #4：我使用 doc.id 而不是 doc.data().id 因为 id 是文档 id，而不是存储在文档中的 id。 // #5: 我试着把它写成 guilds.map(guild => { return })，但没有任何反应。考虑到它甚至根本没有渲染任何东西，我可能做错了，但它在 console.log 中有效

【解决方案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});
  })
}

【讨论】：

我尝试进行此编辑，但没有任何改变。我仍然得到数据并且没有组件呈现。我认为渲染功能有问题。我开始认为 return 不起作用。

【解决方案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 可能已经有所帮助。

【讨论】：