javascript - 无法从 Firestore firebase 获取数据到我的 React 组件

Question

当尝试从我的组件“customers.js”表中的名为“Users”的集合中检索数据时，我什么也没得到，控制台日志中也没有错误！我在组件“Customer.js”中的表格中获取了要获取的数据，该表格显示但它始终为空

客户.js

import PageTitle from "../../../../layouts/PageTitle";
import { Dropdown, Table } from "react-bootstrap";
import firebase from "../../../../../fire";
import { getFirestore } from "firebase/firestore";
import { collection, getDocs } from "firebase/firestore"; 


class Customers  extends React.Component {
  
   // const chack = (i) => (
   //    <div className={`custom-control custom-checkbox ml-2   `}>
   //       <input
   //          type="checkbox"
   //          className="custom-control-input "
   //          id={`checkAll${i}`}
   //          required=""
   //       />
   //       <label
   //          className="custom-control-label"
   //          htmlFor={`checkAll${i}`}
   //       ></label>
   //    </div>
   // );
   state = { 
      Users: [] 
   }
   constructor(props) {

      super(props);

   }
   componentDidMount() {

      firebase.firestore().collection("Users").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
      console.log(`${doc.id} => ${doc.data()}`);
  } );
} );  
      const drop = (
        <Dropdown>
           <Dropdown.Toggle variant="" className="table-dropdown icon-false">
              <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                 <g
                    stroke="none"
                    stroke-width="1"   
                    fill="none"
                    fill-rule="evenodd"
                 >
                    <rect x="0" y="0" width="24" height="24"></rect>
                    <circle fill="#000000" cx="5" cy="12" r="2"></circle>
                    <circle fill="#000000" cx="12" cy="12" r="2"></circle>
                    <circle fill="#000000" cx="19" cy="12" r="2"></circle>
                 </g>
              </svg>
           </Dropdown.Toggle>
           <Dropdown.Menu>
              <Dropdown.Item href="widget-basic">Details</Dropdown.Item>
  
              <Dropdown.Item href="#" className="text-danger">
                 Delete
              </Dropdown.Item>
           </Dropdown.Menu>
        </Dropdown>
     );
      }   

   

   render(){

      return (
         <Fragment>
            <PageTitle activeMenu="Customers" motherMenu="Shop" />
            <div className="row">
               <div className="col-lg-12">
                  <div className="card">
                     <div className="card-body">
                        <div className="table-responsive">
                           <table className="table mb-0 table-striped">
                              <thead class="thead-dark">
                                 <tr>
                                    <th className="">
                                       <div className="custom-control custom-checkbox mx-2">
                                          <input
                                             type="checkbox"
                                             className="custom-control-input"
                                             id="checkAll"
                                          />
                                          <label
                                             className="custom-control-label"
                                             htmlFor="checkAll"
                                          ></label>
                                       </div>
                                    </th>
                                    <th>Avatar</th>
                                    <th>Email</th>
                                    <th>Firstname</th>
                                    <th>Lastname</th>
                                    <th>PhoneNumber</th>
                                    <th>Token</th>
                                    <th>Joined</th>
                                   
                                 </tr>
                              </thead>
                              <tbody>
                                 {this.state.Users.map(data => {

                                    return (
                                       <tr>
                                          <td>{data.avatar}</td>
                                          <td>{data.email}</td>
                                          <td>{data.firstname}</td>
                                          <td>{data.lastname}</td>
                                          <td>{data.phonenumber}</td>
                                          <td>{data.token}</td>
                                       </tr>

                                    );

                                 })}


                              </tbody>
                           </table>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </Fragment>
      );
   };
};

export default Customers ;    

这就是我配置 thje fire.js 的方式

火.js

const firebaseConfig = {
    apiKey: "***********************",
    authDomain: "*******************",
    databaseURL: "**************************",
    projectId: "********************",
    storageBucket: "*******************",
    messagingSenderId: "***************",
    appId: "***********************",
    measurementId: "*************************"
  };
const fire = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore().collection("Users").get().then((querySnapshot) => {
  querySnapshot.forEach((Users) => {
      console.log(`${d.id} => ${doc.data()}`);
  } );
} );
export default fire ; 

标签： javascriptreactjsfirebasegoogle-cloud-firestore