如何從 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>
  );
}

我希望它工作正常。