如何从连接到 Firebase 的 DataGrid 中删除一行？

Question

我有一个 DataGrid table，其中包含来自 Firebase 的数据，我想知道如何删除和更新 Firebase 信息？

我有这段删除行的代码并且它确实有效但是因为我没有添加任何东西来更新 firebase 它不会永久删除它（这使得完美的感觉）：

编辑：删除了不必要的代码片段以保留删除功能 这是在一行被检查之后，然后它让你删除那个被检查的行（并且它有效）但是我没有看到 space （它会引发编译错误）来添加 firebase delete() 函数在那一段代码。

          <IconButton
            onClick={() => {
              const selectedIDs = new Set(selectionModel);
              setEstudiantes((r) => 
              r.filter((x) => 
              !selectedIDs.has(x.id)
              ));
            }}
          >
            <DeleteOutlinedIcon />
          </IconButton>

这是我检查行的方式（它确实有效）：

checkboxSelection
        //Store Data from the row in another variable
        onSelectionModelChange = {(id) => {
          setSelectionModel(id);
          const selectedIDs = new Set(id);
          const selectedRowData = estudiantes.filter((row) =>
            selectedIDs.has(row.id)
          );
          setEstudiantesData(selectedRowData)
        }
      }
        {...estudiantes}

不过，我确实有连接到我的 firebase 并删除我在迁移到 MUI DataGrid 之前所做的文档的删除功能，但我不知道如何集成它。这就是你通常在 firebase 中删除内容的方式

db.collection("usuarios")
.doc(user.uid)
.collection("estudiantes")
.doc(document name variable)
.delete();

谢谢大家 tip/help 欢迎。

*更新这是它的样子

它会按预期进行删除，但不会更新 firebase 和 idk 在哪里添加执行此操作的代码，因为 w/e 我尝试添加它，但出现错误：

如果我只是刷新它回来：

更新添加 DataGrid 的代码：

return (
      <Container fixed>
      <Box mb={5} pt={2} sx={{textAlign:'center'}}>
      <Button
      startIcon = {<PersonAddIcon />} 
      variant = "contained" 
      color = "primary" 
      size = "medium" 
      onClick={crearEstudiante} >
      Crear Estudiantes
      </Button>
      <Box pl={25} pt={2} mb={2} sx={{height: '390px', width: "850px", textAlign:'center'}}>
      <DataGrid
        rows={estudiantes}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}

        components={{
          Toolbar: CustomToolbar,
        }}

        checkboxSelection
        //Store Data from the row in another variable
        onSelectionModelChange = {(id) => {
          setSelectionModel(id);
          const selectedIDs = new Set(id);
          const selectedRowData = estudiantes.filter((row) =>
            selectedIDs.has(row.id)
          );
          setEstudiantesData(selectedRowData)
        }
      }
        {...estudiantes}
        
      />
      </Box>
      <Button
      startIcon = {<ShoppingCartSharpIcon />} 
      variant = "contained" 
      color = "primary" 
      size = "medium" 
      onClick={realizarPedidos} >
      Crear pedido
      </Button>
      </Box></Container>
    )

Update 添加我在尝试添加更新 firebase 的逻辑时遇到的错误图片，无论我把它放在删除逻辑中的什么位置它只是给出我是一个错误，老实说，我不知道把它放在哪里，因为我不太了解 DataGrid

上 MUI 的选择

更新添加我的全部代码：

import React, { useState, useEffect} from 'react'
import {db} from './firebase';
import { useHistory } from 'react-router-dom';
import "./ListadoEstudiantes.css"
import { DataGrid, 
  GridToolbarContainer, GridToolbarFilterButton, GridToolbarDensitySelector} from '@mui/x-data-grid';
import { Button, Container } from "@material-ui/core";
import { IconButton} from '@mui/material';
import PersonAddIcon from '@mui/icons-material/PersonAddSharp';
import ShoppingCartSharpIcon from '@mui/icons-material/ShoppingCartSharp';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import { Box } from '@mui/system';

function ListadoEstudiantes({user}) {

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

 const [estudiantesData, setEstudiantesData] = useState([])

 const parseData = {
  pathname: '/Crear_Pedidos',
  data: estudiantesData
}

const realizarPedidos = () => {
  if(estudiantesData == 0)
  {
    window.alert("Seleccione al menos un estudiante")
  }
  else {
    history.push(parseData);
  }
};

 function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarFilterButton />
      <GridToolbarDensitySelector />
    </GridToolbarContainer>
  );
}


const [estudiantes, setEstudiantes] = useState([]);
const [selectionModel, setSelectionModel] = useState([]);
  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},
    {
      field: "delete",
      width: 75,
      sortable: false,
      disableColumnMenu: true,
      renderHeader: () => {
        return (
          <IconButton
            onClick={() => {
              const selectedIDs = new Set(selectionModel);
              setEstudiantes((r) => 
              r.filter((x) => 
              !selectedIDs.has(x.id)
              ));
            }}
          >
            <DeleteOutlinedIcon />
          </IconButton>
        );
      }
    }
  ];

  const deleteProduct = (estudiante) => {
    if (window.confirm('Quiere borrar este estudiante ?')){
        db.collection("usuarios").doc(user.uid).collection("estudiantes").doc(estudiante).delete();
    }
}

useEffect(() => {
}, [estudiantesData])

 const estudiantesRef = db.collection("usuarios").doc(user.uid).collection("estudiantes")
 useEffect(() => {
  estudiantesRef.onSnapshot(snapshot => {
    const tempData = [];
    snapshot.forEach((doc) => {
      const data = doc.data();
      tempData.push(data);
    });
    setEstudiantes(tempData);
    
    console.log(estudiantes)
  })
 }, []);

 useEffect (() => {
  const estData = window.localStorage.getItem("estudiantes");
  setEstudiantes(JSON.parse(estData))
}, [])

 useEffect (() => {
   window.localStorage.setItem("estudiantes", JSON.stringify(estudiantes))
 })

    return (
      <Container fixed>
      <Box mb={5} pt={2} sx={{textAlign:'center'}}>
      <Button
      startIcon = {<PersonAddIcon />} 
      variant = "contained" 
      color = "primary" 
      size = "medium" 
      onClick={crearEstudiante} >
      Crear Estudiantes
      </Button>
      <Box pl={25} pt={2} mb={2} sx={{height: '390px', width: "850px", textAlign:'center'}}>
      <DataGrid
        rows={estudiantes}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}

        components={{
          Toolbar: CustomToolbar,
        }}

        checkboxSelection
        //Store Data from the row in another variable
        onSelectionModelChange = {(id) => {
          setSelectionModel(id);
          const selectedIDs = new Set(id);
          const selectedRowData = estudiantes.filter((row) =>
            selectedIDs.has(row.id)
          );
          setEstudiantesData(selectedRowData)
        }
      }
        {...estudiantes}
        
      />
      </Box>
      <Button
      startIcon = {<ShoppingCartSharpIcon />} 
      variant = "contained" 
      color = "primary" 
      size = "medium" 
      onClick={realizarPedidos} >
      Crear pedido
      </Button>
      </Box></Container>
    )
}

export default ListadoEstudiantes

Answer 1

因此，在您过滤 estudiantes 之后，您剩下的是用户不想删除的项目。但在我们这样做之前，我们必须获取用户想要删除的项目，以便我们可以从 Firebase 中删除它们。

您可以将删除按钮的 onClick 函数替换为：

onClick={() => {
const selectedIDs = new Set(selectionModel);
estudiantes.filter((x) =>
selectedIDs.has(x.id)).map( x => {
db.collection("usuarios").doc(user.uid).collection("estudiantes").doc(x.uid).delete()
})
)
////If NOT updating from db add this 
setEstudiantes(estudiantes.filter((x) =>
!selectedIDs.has(x.id)))
}}

用户要删除的项目在 selectedIDs 中，因此我们需要使用 selectedIDs.has(x.id) 而不是 !selectedIDs.has(x.id)。现在我们只剩下一个数组，其中只包含要删除的项目。我们 map 这个数组来删除这些选中的项目中的每一个。通过使用 map 方法。

在此之后，您可以过滤 estudiantes，因为现在我们不需要刚刚从 Firebase 中删除的项目。（如果您是从 firebase 更新的，则可以跳过这一项，因为新数据不包括已删除的项目）。

请告诉我这是否是您要找的东西。

如何从连接到 Firebase 的 DataGrid 中删除一行？

How to delete a row from a DataGrid that is connected to Firebase?

firebase

reactjs

google-cloud-firestore

mui-datatable