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

Question

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

但没有一个包含 firebase。欢迎任何 documentations/tips/help。

到目前为止我的代码：

来自 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}
]

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

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

的数据使其看起来的样子

欢迎任何tips/documentation/help

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");
      })
    }

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

最后结果：

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

How to parse data from firebase to MUI DataGrid?

datagrid

firebase

reactjs

material-ui

google-cloud-firestore