如何正确存储 Firebase 实时数据库中的数据并在检索到数据后使用 React 进行渲染？

Question

我正在成功地从我的 Firebase 实时数据库中检索数据，但我无法使用 React 将其存储并呈现到我的网页上。谁能告诉我我的流程目前有什么问题？和/或您能否分享一个类似用例中“正确”存储/渲染过程的示例？

这是我渲染存储数据的方式：

function Dashboard() {

var player_data;
var name_string;

return (
    <div className="dashboard">
        <h2>{player_data && player_data.settlement.settlement_name}</h2> {/* NOT RENDERING */}
    </div>

  );

这里是获取 player_data 的函数，它正在成功地将数据写入控制台：

function GetPlayerData(){       
Firebase.database().ref().child("players").child(currentUser.uid).get().then((snapshot) => {
        if (snapshot.exists()) {
            console.log(snapshot.val());
            player_data = snapshot.val();
            console.log(player_data.settlement.settlement_name)
            console.log(player_data.player_data.ancestor_name)
            name_string = JSON.stringify(player_data.settlement.settlement_name)
        } else {
            console.log("No data available");
        }
        }).catch((error) => {
        console.error(error);
        });
    }

非常感谢！

下一次尝试：我尝试将带有 useState 的 player_data 存储为 const JSON 变量，如下所示，结果收到“TypeError: Cannot read properties of undefined (reading 'settlement_name') "

function Dashboard() {
const [ player_data, setPlayerData ] = useState();

return (
    <div className="dashboard">
        <h2>{player_data && player_data.settlement.settlement_name}</h2> {/* NOT RENDERING */}
        <h2>{player_data && player_data.player_data.ancestor_name}</h2> {/* NOT RENDERING */}
    </div>

这是我更新后的 GetPlayerData()：

Firebase.database().ref().child("players").child(currentUser.uid).get().then((snapshot) => {
        if (snapshot.exists()) {
            console.log(snapshot.val());
            setPlayerData(snapshot.val());
            console.log(player_data.settlement.settlement_name)
            console.log(player_data.player_data.ancestor_name)
        } else {
            console.log("No data available");
        }
        }).catch((error) => {
        console.error(error);
        });
    }

  );

这是我的数据库当前结构的屏幕截图：

热烈感谢任何建议。谢谢阅读！ :)

工作代码！

function Dashboard() {
const [ playerData, setPlayerData ] = useState();

return (
    <div className="dashboard">
        <h2>{playerData && playerData.settlement.settlement_name}</h2> {/* RENDERING!! */}
        <h2>{playerData && playerData.player_data.ancestor_name}</h2> {/* RENDERING! */}
    </div>

这是我更新后的 GetPlayerData()：

Firebase.database().ref().child("players").child(currentUser.uid).get().then((snapshot) => {
        if (snapshot.exists()) {
            console.log(snapshot.val());
            setPlayerData(snapshot.val());
            console.log(playerData) {/* NOT LOGGING : RETURNING UNDEFINED */}            
            console.log(playerData.settlement.settlement_name) {/* NOT LOGGING : RETURNING TypeError: Cannot read properties of undefined (reading 'settlement') */}
        } else {
            console.log("No data available");
        }
        }).catch((error) => {
        console.error(error);
        });
    }

  );

Answer 1

您可以使用 firebase API 从 firebase 实时数据库中获取数据并将其存储在 state 或 redux 存储中。使用 useEffect 调用异步函数。

const getData=async ()=>{
  const response=await fetch('firebase API url');
  const data=await response.json();
  setPlayerData(data)
 }
useEffect(()=>{
 getData()
},[]);

为了将数据渲染到 JSX，请告诉我您从 firebase 检索的数据类型。您是返回对象还是对象数组？

根据返回值，我们应该在 JSX 中编写代码。

如果你要返回一个对象：

const playerdata={name:'Roomba',settlement:{settlement_name:'RumCity'}}
JSX Code:
<div>
<h1>{playerData.name} {playerData.settlement.settlement_name}</h1>

如果您来自 firebase 的响应是一个对象数组，那么您需要使用 map 函数在 UI 中呈现所有对象。

Answer 2

当您从 Firebase 获取播放器数据时，您需要将播放器数据存储在组件的状态中（通过调用 setState 或 useState 挂钩），以便触发重新渲染。然后，您的渲染代码可以从状态中读取数据。

在此处查看我的答案的一个非常简短的示例：Initiate React components with data from Firebase database? 或略长一点的示例：Retrieving items from firebase and dynamiccaly populating it in react native