如何将数据从 firebase 解析到 MUI DataGrid？答案

【问题标题】：How to parse data from firebase to MUI DataGrid?如何将数据从 firebase 解析到 MUI DataGrid？
【发布时间】：2021-11-20 23:52:01
【问题描述】：

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

但没有一个包含 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 中的数据使其看起来的方式

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

【问题讨论】：

标签： reactjs firebase google-cloud-firestore datagrid material-ui

【解决方案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");
      })
    }

它在 Firebase 中的外观（仍然与列匹配）

终于出结果了：

【讨论】：