反应数据表值复制

Question

我正在从 firebase 实时数据库及其工作中获取数据，期待 table 的头部，即姓名、电子邮件和其他内容。它应该像每个数据一样只在最顶部显示一次table，相反，它会在每个新条目上显示。

（很抱歉一切都是法语）

提前致谢。

这是一张照片：

这是我的代码：

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">
   
   {
       this.state.contacts &&
       this.state.contacts.map( contact => {
           return(
            
           <div className="ProClassReservations">
                <table>
           <thead>
               <tr>
                   <td>Nom Complet</td>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <td>Email</td>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <td>Date d'arrivée</td>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <td>Date de Départ</td>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <td>Nombre de Personnes</td>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <td>Type de Chambre</td>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <td>Tel</td>
               </tr>
           </thead>
              <tbody>
               <tr>
             <td>{contact.nom}</td>
             &nbsp;
         <td>{contact.email}</td>
         &nbsp;
         <td>{contact.arrive}</td>
         &nbsp;
         <td>{contact.depart}</td>
         &nbsp;
         <td>{contact.npersonnes}</td>
         &nbsp;
         <td>{contact.type}</td>
         &nbsp;
         <td>{contact.tel}</td>
         </tr>
         </tbody>
         </table>
        
           </div>
           )
       })
   }
   
   
   </div>
   )
   }
}

export default Pro

Answer 1

这是因为您在地图中有 Table headers，您必须仅将值映射到相应的 table 行。您需要做的就是在 headers.

之后附加行

return (
       
   <div className="ProClass">
           <div className="ProClassReservations">
                <table>
           <thead>
               <tr>
                   <td>Nom Complet</td>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <td>Email</td>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <td>Date d'arrivée</td>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <td>Date de Départ</td>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <td>Nombre de Personnes</td>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <td>Type de Chambre</td>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <td>Tel</td>
               </tr>
           </thead>
              <tbody>
{
       this.state.contacts &&
       this.state.contacts.map( contact => {
           return(
         <tr>
             <td>{contact.nom}</td>
             &nbsp;
         <td>{contact.email}</td>
         &nbsp;
         <td>{contact.arrive}</td>
         &nbsp;
         <td>{contact.depart}</td>
         &nbsp;
         <td>{contact.npersonnes}</td>
         &nbsp;
         <td>{contact.type}</td>
         &nbsp;
         <td>{contact.tel}</td>
         </tr>
           )
       })
   }

         </tbody>
         </table>
        
           </div>
           )

反应数据表值复制

React Datatable Values Duplicating

datatable

firebase

reactjs

google-cloud-firestore