Javascript 使用Firestore数据渲染React组件

我正在尝试使用Firestore中的数据呈现我的帮会组件。我将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>

---

更新：已解决，修复在渲染功能中。

您使用状态“公会”，但您更新状态“帖子”或我遗漏了什么？

您使用状态“公会”，但您更新状态“帖子”或我遗漏了什么？

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

您的组件是

Guild.js

，但您正在呈现

您正在将state设置为

posts

，但使用

this.state.guilds

呈现组件

通过映射Firestore数据的方式，每次都将该状态覆盖到快照中的最后一个对象

使用

doc.id

而不是

doc.data（）.id

您没有将

协会映射到渲染。公会是公会对象的数组，因此您应该执行类似于
guilds.map（guild=>{return}

---

下面是一些需要修复的问题，然后在渲染之前尝试

console.log（this.state.guilds）

，看看是否获得了正确的数据我在这里看到了一些问题：

您的组件是

Guild.js

，但您正在呈现

您正在将state设置为

posts

，但使用

this.state.guilds

呈现组件

通过映射Firestore数据的方式，每次都将该状态覆盖到快照中的最后一个对象

使用

doc.id

而不是

doc.data（）.id

您没有映射

guilds

进行渲染。guilds是一组帮会对象，因此您应该执行类似

guilds.map（guild=>{return}

---

这些问题很少需要解决，然后尝试

console.log（this.state.guilds）

在渲染之前，查看您是否获得了正确的数据

我认为您的问题在于，由于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});
  })
}

---

我认为您的问题在于，由于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});
  })
}

---

尝试使用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]符号，这意味着该状态尚未就绪，因此这是一个am async问题。但用map函数替换forEach可能已经有所帮助。

尝试使用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]符号靠近您的状态，这意味着状态尚未就绪，因此这是一个异步问题。但将forEach替换为map函数可能已经有所帮助。

您可以共享从fire store获取数据的代码，或者响应的控制台日志吗？@WilliamChou抱歉，我写这篇文章很快，请继续查找我缺少的内容。这不是问题显然，在这里发布的时间太长了，所以我必须将其发布到粘贴箱中。编辑：代码是否曾经到达

的内部，然后

？如果是，快照中是否有任何数据？

控制台.log（）是否

print any？@FrankvanPuffelen是的，它只打印出数据库中的2列。我可以获取数据，只是无法将帮会组件获取到renderAh OK。如果调用

setState（）

正在使用数据库中的正确数据进行操作，恐怕我不是最好的帮助者。你能分享一下从fire store获取数据的代码吗？也许还有一个控制台响应日志？@WilliamChou抱歉，我写这篇文章写得太快了，请继续查找我丢失的东西。显然，这里太长了，所以我必须将它放在一个粘贴箱中。编辑：代码是否曾经到达

的内部，然后

？如果是，则

快照中是否有数据

？控制台是否有日志（）print any？@FrankvanPuffelen是的，它只打印出数据库中的2列。我可以获取数据，只是无法将帮会组件获取到renderAh OK。如果调用

setState（）

是用数据库中正确的数据发生的，恐怕我不是最好的帮助人。是的，那是我的错别字，我修正了，但仍然不起作用。是的，那是我的错别字，我修正了，但仍然不起作用。#1:typo，它实际上是源代码中的Guilds.js/#2：也是一个错别字，修正了，没有任何变化d、 //#3:我在Firestore中有2个文档，它们在调用时都能正确存储。/#4:我使用doc.id而不是doc.data（）.id，因为id是文档id，而不是文档中存储的id。/#5:我尝试将其作为guilds.map（guild=>{return}编写），什么也没有发生。考虑到它甚至没有渲染任何东西，我可能会做错，但它在控制台中工作。log#1：输入错误，它实际上是源代码中的Guilds.js/#2：也是输入错误，修复了，没有任何更改。//#3：我在Firestore中有两个文档，它们在调用时都能正确存储。//#4：我使用doc id而不是doc.data（）.id，因为该id是文档id，而不是存储在文档中的id。//#5:我尝试将其作为guilds.map（guild=>{return}编写，但什么都没有发生。考虑到它甚至没有呈现任何内容，我可能会做错，但它在控制台中工作。logI尝试进行此编辑，但没有任何更改