在 React 中將 Firebase 數據提取到數據表中

Question

我正在嘗試從 firebase 獲取數據到我的反應頁面，它正在工作，但我希望數據在一個表中，我嘗試過但沒有成功。

我已經到了可以顯示表格的地步，但我無法將數據放在表格中，名稱在名稱下，email 在 email 下，消息在消息下。 謝謝

這是我的代碼：

import React from 'react'
import { bd, auth } from '../firebase'
import "../reserve.css"
import 'bootstrap/dist/css/bootstrap.min.css';

class Pro extends React.Component {
    
    state = { 
    contacts: null 
    }
    
    componentDidMount(){
        bd.collection('contacts')
         .get()
         .then( snapshot => {
             const contacts = []
             snapshot.forEach( doc => {
                 const data = doc.data()
                 contacts.push(data)
             })
             this.setState({ contacts: contacts })
             console.log(snapshot)
         })
         .catch ( error => console.log(error))
    }
    
   render(){
   return (
       
   <div className="ProClass">
       <table>
           <tr>
               <td>email</td>
               <td>name</td>
               <td>message</td>
           </tr>
       
   <h1>Réservations:</h1>
   {
       this.state.contacts &&
       this.state.contacts.map( contact => {
           return(
           <div className="ProClassReservations">
               <tr>
             <tr>{contact.email}</tr>
         <tr>{contact.message}</tr>
         <tr>{contact.name}</tr>
         </tr>
       
           </div>
             
             )
        })
   }</table>
   </div>
   )
   }
}

export default Pro

Answer 1

只需將數據周圍的tr更改為td ，如下所示：

import React from "react";
import { bd, auth } from "../firebase";
import "../reserve.css";
import "bootstrap/dist/css/bootstrap.min.css";

class Pro extends React.Component {
  state = {
    contacts: null,
  };

  componentDidMount() {
    bd.collection("contacts")
      .get()
      .then((snapshot) => {
        const contacts = [];
        snapshot.forEach((doc) => {
          const data = doc.data();
          contacts.push(data);
        });
        this.setState({ contacts: contacts });
        console.log(snapshot);
      })
      .catch((error) => console.log(error));
  }

  render() {
    return (
      <div className="ProClass">
        <table>
          <tr>
            <td>email</td>
            <td>name</td>
            <td>message</td>
          </tr>

          <h1>Réservations:</h1>
          {this.state.contacts &&
            this.state.contacts.map((contact) => {
              return (
                <div className="ProClassReservations">
                  <tr>
                    <td>{contact.email}</td>
                    <td>{contact.message}</td>
                    <td>{contact.name}</td>
                  </tr>
                </div>
              );
            })}
        </table>
      </div>
    );
  }
}

export default Pro;