Question

我一直试图将信息从我的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}
)

Answer 1

您应该在render函数内部返回JSX。
displayAllPlayers不返回任何内容。
此代码段
```
  querySnapshot.forEach(doc => {
     <Player key={doc.data().First} fName={doc.data().First} lName={doc.data().Last} />
  })
```
即使您这样做，您也不会在传递给forEach的回调中返回任何内容，因为forEach不返回数组，所以它不起作用。您可以在此处使用map。
维护组件中的状态并在获取数据后对其进行更新。使用此状态呈现JSX元素数组。

Answer 2

通常建议创建一个不同的帮助程序文件。

创建一个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";

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

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

我希望它能正常工作。

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

2 个答案: