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

Question

我一直在尝试将我的 firebase 中的信息渲染到反应原生组件。 我首先通过控制台记录我所做的事情，数据被完全提取：

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

Answer 1

• 您应该在render function 中返回 JSX。

• displayAllPlayers没有返回任何东西。

• 在这个片段中

   querySnapshot.forEach(doc => { <Player key={doc.data().First} fName={doc.data().First} lName={doc.data().Last} /> })

  即使你这样做了，你也不会在传递给forEach的回调中返回任何内容，它不起作用，因为forEach不返回数组。 您可以在此处使用map 。

• 在组件中维护一个 state 并在获得数据后对其进行更新。 使用这个 state 来渲染 JSX 元素的数组。

Answer 2

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

创建一个包含 function 的 firebase 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 });

现在在 state 你有一个阵列球员。 要显示播放器的内容，您可以在渲染中使用 function 作为 -

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

然后，您可以使用 function 将玩家的详细信息返回为 -

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

我希望它工作正常。