成功获取的 Firestore 数据未呈现（React）答案

【问题标题】：Successfully fetched firestore data does not render (React)成功获取的 Firestore 数据未呈现（React）
【发布时间】：2021-06-03 16:46:05
【问题描述】：

我在 React 中创建了一个排行榜组件，它显示了各种个人姓名和分数的列表。我成功地从 Firestore 检索数据并将其打印到我的控制台，但它永远不会最终呈现到屏幕上。

我相信这一定是 Effect 钩子中的东西，但是当我查看其他答案时，我不确定它有什么问题。也可能是我的 leaderboardData 变量永远不会被填充。

获取数据的代码：

const fetchLeaderboardData = async() => {
db.collection('Leaderboard').get()
  .then(snap => {
    snap.docs.map(doc => {
      console.log(doc.data())
      return {
        ...doc.data(),
        id: doc.id,
        ref: doc.ref
      }
    })
  })
}

效果挂钩：

const [leaderboardData, setLeaderboardData] = useState([])
useEffect(() => {
(async () => {
  const newLeaderboardData = await fetchLeaderboardData();
  setLeaderboardData(newLeaderboardData);
})();
}, [])

要渲染的代码：

return (
<div className="wrapper">
  <div className="lboard_section">
    <div className="lboard_tabs">
      <div className="tabs">
        <ul>
          <li>All Time</li>
        </ul>
      </div>
    </div>
    <div className="lboard_wrap">
    {leaderboardData && leaderboardData.map(item => {
      <div key={item.id} className="lboard_mem">
        <div className="namebar">
          <p>{ item.name }</p>
        </div>
        <div className="points">
          { item.score + " "} points
        </div>
      </div>
    })}
    </div>
  </div>
</div>
);

【问题讨论】：

您应该返回您的地图：return snap.docs.map(... 通常还要小心混合 async/await 的东西和 .then/.catch 的东西

标签： reactjs firebase asynchronous google-cloud-firestore

【解决方案1】：

你是。在您的 fetchLeaderboardData 函数中缺少两个 return 语句。

const fetchLeaderboardData = async() => {
  return db.collection('Leaderboard').get().then(snap => {
    return snap.docs.map(doc => {
      console.log(doc.data())
      return {
        ...doc.data(),
        id: doc.id,
        ref: doc.ref
      }
    })
  })
}

没有这些返回语句，fetchLeaderboardData 没有返回值，因此 await fetchLeaderboardData() 不会返回任何内容。

【讨论】：