如何从 Firestore 渲染数据以响应本机组件？答案

【问题标题】：How Can I Render Data From Firestore To React Native Component?如何从 Firestore 渲染数据以响应本机组件？
【发布时间】：2020-07-05 14:07:28
【问题描述】：

我一直在尝试将我的 firebase 中的信息渲染到 react native 组件。我从控制台开始记录我所做的事情，数据被完全提取：

displayAllPlayers(){
dbh.collection('Players').get()
.then(querySnapshot => {
    querySnapshot.forEach(doc => {
        console.log(doc.data().First, doc.data().Last)
    })
})}

然后我尝试将此信息添加到我的组件中，如下所示：

displayAllPlayers(){
dbh.collection('Players').get()
.then(querySnapshot => {
    querySnapshot.forEach(doc => {
        <Player key={doc.data().First} fName={doc.data().First} lName={doc.data().Last} />
    })
})
}
render() { 
    const myPlayers = this.displayAllPlayers()
} 
return(
    {myPlayers}
)

【问题讨论】：

标签： reactjs react-native google-cloud-firestore

【解决方案1】：

总是建议创建一个不同的帮助文件。

创建一个firebase-helpers.js 文件，该文件具有将快照转换为数组的功能。

// FILENAME - firebase-helpers.js
export const snapshotToArray = (snapshot) => {
  let returnArr = [];

  snapshot.forEach((childSnapshot) => {
    let item = childSnapshot.data();

    returnArr.push(item);
  });

  return returnArr;
};

现在在您的屏幕中，导入此文件

import { snapshotToArray } from "../helpers/firebaseHelpers";

然后，将 Players 的快照转换为数组

const playersSnapshot = dbh.collection('Players').get();
const playersArray = snapshotToArray(playersSnapshot);
this.setState({ players : playersArray });

现在你有一个数组播放器。要显示播放器的内容，您可以在渲染函数中使用 -

<FlatList
   data={this.state.players}
   renderItem={({ item }, index) => this.playerDisplay(item, index)}
   keyExtractor={(item, index) => index.toString()}
/>

然后你可以有一个函数来返回玩家的详细信息 -

playerDisplay = (item, index) => {
  return(
    <View>
          <Text>
                Player {index} - {item.First} {item.Last}
          </Text>
    </View>
  );
}

我希望它能正常工作。

【讨论】：

【解决方案2】：

您应该在 render 函数中返回 JSX。
displayAllPlayers 没有返回任何内容。
在这个sn-p中
```
  querySnapshot.forEach(doc => {
     <Player key={doc.data().First} fName={doc.data().First} lName={doc.data().Last} />
  })
```
在传递给forEach 的回调中没有返回任何内容，即使你这样做了，它也不起作用，因为forEach 不返回数组。你可以在这里使用map。
在组件中维护一个状态，并在获得数据后更新它。使用这个状态来渲染 JSX 元素的数组。

【讨论】：