用于获取数据和发布数据的 React 和 Firebase 连接

Question

我想将数据放在 li 标签之间的 Firebase 中。例如;房间代码：{roomCode}，但我无法随意访问从 Firebase 收到的数据。

这是我在控制台中查看数据的唯一方法：

import React, {useState, useEffect, Component} from "react";
import fire from './fire';



function DataConnection() {

    const [rooms, setRooms] = useState();

    useEffect(() => {
        const db = fire.firestore();
        return db.collection('rooms').onSnapshot((snapshot) => {
            const postData = [];
            snapshot.forEach((doc) => postData.push({...doc.data(), id:doc.id}));
            setRooms(postData);
        });
    }, []);

    console.log(rooms);


    return(
        <div>
 
          
        </div>
    );};

export default DataConnection;

Answer 1

代码中没有任何地方将房间的结果映射到返回语句中

function DataConnection() {

const [rooms, setRooms] = useState();

useEffect(() => {
    const db = fire.firestore();
    return db.collection('rooms').onSnapshot((snapshot) => {
        const postData = [];
        snapshot.forEach((doc) => postData.push({...doc.data(), id:doc.id}));
        setRooms(postData);
    });
}, []);

console.log(rooms);
rooms.map((el) => {
  return (<><li>Roomname: { el.roomName} </li><li>Roomcode: {el.roomCode}</li></>)
}