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

反应的工作方式略有不同。您需要将异步调用响应保存到状态中，然后在渲染循环中检查状态是否存在，然后循环遍历并打印播放器。

Answer 2

这是一个similar question，它已经回答了。

我引用了可能对您有用的要点：

将数据保存到加载数据时的状态

render() { 
    const myPlayers = this.displayAllPlayers()
     let data = doc.data();
        this.setState({ data: myPlayers });  
}

然后根据需要渲染它们：

render() {

    let dataUI = this.state.data ? <h1>No Data</h1> : <pre>{JSON.stringify(this.state.data)}</pre>;

    return (
        <div className="classname">
            <h1>... </h1>

            <div>
                <h1>UI Data</h1>
                {dataUI}
            </div>
        </div>
    );
}

这也是关于Getting started with Cloud Firestore on React Native的教程。这是另一个更解释的教程：Create React Native Firebase CRUD App with Firestore。

我建议您选中两个链接以更好地理解它们。

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

2 个答案: