reactjs - 如何将数据从 firebase 解析到 MUI DataGrid？

Question

我正在尝试学习如何将数据从 firebase 解析到 MaterialTable，因为它看起来比使用地图和“手动”进行更干净<th>，<tr>但我还没有看到任何链接 MaterialTable + firebase 的教程。到目前为止的所有教程都显示您可以解析一些手动数据，如下所示：

但没有一个包含firebase。欢迎任何文档/提示/帮助。

到目前为止我的代码：

来自 firebase 的数据（工作）

const [estudiantes, setEstudiantes] = useState([]);
const estudiantesRef = db.collection("usuarios").doc(user.uid).collection("estudiantes")

  useEffect(() => {
    estudiantesRef
    .orderBy('name')
     .onSnapshot(snapshot => {
       
        const tempData = [];
        snapshot.forEach((doc) => {

          const data = doc.data();
          tempData.push(data);

        });
        setEstudiantes(tempData);
      })
  }, []);

列（工作）

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },

  {field: 'nombre', headerName: 'Nombre', width: 200},

  {field: 'colegio', headerName: 'Colegio', width: 250},

  {field: 'grado', headerName: 'Grado', width: 150}
]

以及我如何“渲染”表格（工作）

return (
        <div className = "table_container" >
      <DataGrid
        rows={tempData}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
      />
    </div>
    )
}

export default ListadoEstudiantes

我的数据一半尝试（我一直在尝试）

const [data, setData] = useState();

useEffect(() => {

  estudiantes.map((estudiantes, index) => ({
    setData(estudiantes[index])
  }))
}, [estudiantes])

到目前为止，这给了我一个错误，但我会继续尝试，直到我得到它。这就是我希望使用 Firebase 中的数据使其看起来的方式

欢迎任何提示/文档/帮助

标签： reactjsfirebasegoogle-cloud-firestoredatagridmaterial-ui

Answer 1

好吧，显然你不必做任何花哨的事情，我发现只要你的 doc() 中的变量名称。匹配您在列选项中设置的那些

在代码中设置：

在代码中，您可以看到当我设置与列变量名称匹配的值时

const register = (e) => {
      e.preventDefault();
      const docRef = db.collection('usuarios').doc(user.uid).collection('estudiantes').doc();
      docRef.set({
        nombre: firstName + " " + lastName,
        colegio: escuela,
        grado: grado,
        uid: docRef.id,

      }).then((r) => {
          history.push("/Inicio");
      })
    }

它在火力基地中的外观（仍然与列匹配）

最终结果：