如何在 React 中读取 Firebase 数据答案

【问题标题】：How to read Firebase Data in React如何在 React 中读取 Firebase 数据
【发布时间】：2020-08-13 04:36:28
【问题描述】：

这感觉像是一个非常愚蠢的问题，但我花了 5 个小时试图理解从我的 Firebase 实时数据库中获取数据的最简单的概念：

这是我的代码的简化版本：

var players = [];

firebase.database().ref('roomid-1').on('value', function(snapshot){
    let blob = snapshot.val();
    players = blob.Players;
    console.log(players);
});

function Listing(){
    let group = players.map((player, index) =>
    <div className="col-4" key={index}>
        Player: {player.name} | {player.color}
    </div>
    );
    return group;
}

但是，尽管能够在控制台日志中看到我想要的数据，但什么也不渲染：

0: {color: "green", name: "Rod"}
1: {color: "red", name: "Todd"}

但我不知道如何从“.on()”函数中获取任何数据。而且我尝试了任意数量的抽象。我在这里错过了什么？

编辑：更新所有代码：

import React from 'react';
import firebase from "./../firebase";

let players = [];

firebase.database().ref('roomid-1').on('value', function(snapshot){
    let blob = snapshot.val();
    players = blob.Players;
    console.log(players);
});

function Listing(){
    let group = players.map((player, index) =>
    <div className="col-4" key={index}>
        Player: {player.name} | {player.color}
    </div>
    );
    return group;
}


export default function Players(props){
    
    return <div className="row">
        <Listing />
    </div>
}

【问题讨论】：

我不明白你的问题。你想达到什么目的？
我无法访问应用程序中的任何数据。 “列表”呈现一个空组。
这不是由于 firebase。这是因为 React 是如何工作的。你也可以粘贴其他代码部分吗？
我添加了相关组件的全部代码。值得注意的是，当我使用正确的数组预加载“Players”时，它会正确呈现，并且我可以在代码中的其他地方对数组进行更新并且它可以工作，但是在“.on()”函数内部完成的任何更新都不会t 出现。

标签： javascript reactjs firebase-realtime-database

【解决方案1】：

当变量 players 改变时，React 不会重新渲染，因为它不是任何组件状态的一部分。我建议在Players 组件中使用useState 挂钩来创建变量players 和更新其值setPlayers 的方法。使用useEffect 钩子，您可以进行api 调用，当从api 返回数据时，调用setPlayers 来更新组件状态。然后将players 从Players 组件状态作为道具传递给Listing 组件。

【讨论】：

非常感谢！我试试看。