如何在表格中打印/渲染 Firebase 信息 REACT JS

Question

在发帖之前，我总是在谷歌、youtube、论坛上搜索，或者尝试自己弄清楚，甚至查看其他人的类似问题，但我很遗憾地被卡住了。

所以我使用的是firestore数据库，用户可以创建一个“学生”，数据是firestore的保存如下：

它保存课程、名称、学校和创建它的人的 UID。到目前为止，我将这些信息导入到 firestore 没有问题，现在问题是将它带回表中，我不明白为什么没有被打印出来。

控制台日志正在打印所有学生 1 到 1 + 数组中的所有学生（原因正在遍历所有信息）

现在你可以看到桌子是空的！我不明白为什么！ 非常沮丧

这是相关的代码片段：

• 数据库部分：

useEffect(() => {
        db.collection('usuarios').doc(user.uid).collection('estudiantes')
        .get().then((snapshot) => {
                   (snapshot.forEach(doc => {
                      const data = doc.data();
                      estudiantes.push(data)
                      
                     console.log(doc.data());
                     console.log(estudiantes)
            }))
        })
    }, []);

• 地图/渲染

<tbody>
                {estudiantes.map((e) => (

                        <tr >
                        <td>

                        <input onChange = {(event) => {
                            let checked = event.target.checked;
                        }} 
                        
                        type="checkbox" checked = "">
                        </input>
                        </td>

                        <td >{e.name}</td>
                        <td >{e.school}</td>
                        <td >{e.grade}</td>
                        <td></td>
                        </tr>
                     ))}
                </tbody>

• 完整代码：

import React, { useState, useEffect } from 'react'
import { auth, db } from './firebase';
import "./ListadoEstudiantes.css"
import data from "./mock-data.json"
import { useHistory } from 'react-router-dom';
import { Checkbox } from '@material-ui/core';

function ListadoEstudiantes({user}) {

    const [contacts, setContacts] = useState(data);
    const history = useHistory("");

    const crearEstudiante = () => {
          history.push("/Crear_Estudiante");
      }

      const realizarPedidos = () => {
        history.push("/Crear_Pedidos");
    }
    
    const estudiantes = [];

    useEffect(() => {
        db.collection('usuarios').doc(user.uid).collection('estudiantes')
        .get().then((snapshot) => {
                   (snapshot.forEach(doc => {
                      const data = doc.data();
                      estudiantes.push(data)
                      
                     console.log(doc.data());
                     console.log(estudiantes)
            }))
        })
    }, []);

    return (
        <div className="listadoEstudiantes"> 
        <div className="estudiantes_container">
            <h1 className = "estudiantes_container_h1">Listado de estudiantes</h1>
            <button onClick={crearEstudiante} className = "crear_estudiante_boton">Crear Estudiantes</button>
            <h3 className = "estudiantes_container_h3">*Para realizar su pedido seleccione a los estudiantes</h3>
            <div className ="tableContainer">
            <table>
                <thead>
                    <tr className="Lista">
                        <th>
                            <input type="checkbox"></input>
                        </th>
                        <th>Nombre</th>
                        <th>Colegio</th>
                        <th>Grado</th>
                        <th>Accion</th>
                    </tr>
                </thead>
                <tbody>
                {estudiantes.map((e) => (

                        <tr >
                        <td>

                        <input onChange = {(event) => {
                            let checked = event.target.checked;
                        }} 
                        
                        type="checkbox" checked = "">
                        </input>
                        </td>

                        <td >{e.name}</td>
                        <td >{e.school}</td>
                        <td >{e.grade}</td>
                        <td></td>
                        </tr>
                     ))}
                </tbody>
            </table>
            </div>

            <div className="space" />
            <button onClick={realizarPedidos} className = "crear_estudiante_boton">Realizar Pedidos</button>
            <div className="space" />
      </div>

      </div>
    )
}

export default ListadoEstudiantes

我想就是这样，用户来自 Firestore 数据库，我导入的 数据 是我用来测试表（并且呈现没有问题）的假数据，可以被忽略。

这是它在假数据上的外观以及它在真实数据上的外观（这不起作用！：'3）

Answer 1

estudiantes 应该是组件的本地 state。因此，需要将其捕获为状态，并将其用于表格数据渲染，如下所示。

setEstudiantes 是一个 setState 函数，它异步更新状态。因此，为了检查更新的状态，您需要在 render 方法中包含console.log("estudiantes: ", estudiantes)（而不是在setEstudiantes(tempData) 之后）。否则，您将无法看到更新后的状态。

import React, { useState, useEffect } from "react";
import { auth, db } from "./firebase";
import "./ListadoEstudiantes.css";
import data from "./mock-data.json";
import { useHistory } from "react-router-dom";
import { Checkbox } from "@material-ui/core";

function ListadoEstudiantes({ user }) {
  const [contacts, setContacts] = useState(data);
  const [estudiantes, setEstudiantes] = useState([]);
  const history = useHistory("");

  const crearEstudiante = () => {
    history.push("/Crear_Estudiante");
  };

  const realizarPedidos = () => {
    history.push("/Crear_Pedidos");
  };

  useEffect(() => {
    db.collection("usuarios")
      .doc(user.uid)
      .collection("estudiantes")
      .get()
      .then((snapshot) => {
          const tempData = [];
        snapshot.forEach((doc) => {
          const data = doc.data();
          tempData.push(data);

          console.log(doc.data());
          console.log("Temp Data: ", tempData);
        });
        setEstudiantes(tempData);
      });
  }, []);

  console.log("estudiantes: ", estudiantes);

  return (
    <div className="listadoEstudiantes">
      <div className="estudiantes_container">
        <h1 className="estudiantes_container_h1">Listado de estudiantes</h1>
        <button onClick={crearEstudiante} className="crear_estudiante_boton">
          Crear Estudiantes
        </button>
        <h3 className="estudiantes_container_h3">
          *Para realizar su pedido seleccione a los estudiantes
        </h3>
        <div className="tableContainer">
          <table>
            <thead>
              <tr className="Lista">
                <th>
                  <input type="checkbox"></input>
                </th>
                <th>Nombre</th>
                <th>Colegio</th>
                <th>Grado</th>
                <th>Accion</th>
              </tr>
            </thead>
            <tbody>
              {estudiantes.map((e) => (
                <tr>
                  <td>
                    <input
                      onChange={(event) => {
                        let checked = event.target.checked;
                      }}
                      type="checkbox"
                      checked=""
                    ></input>
                  </td>

                  <td>{e.name}</td>
                  <td>{e.school}</td>
                  <td>{e.grade}</td>
                  <td></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="space" />
        <button onClick={realizarPedidos} className="crear_estudiante_boton">
          Realizar Pedidos
        </button>
        <div className="space" />
      </div>
    </div>
  );
}

export default ListadoEstudiantes;