如何从连接到firebase的datagrid中删除行？

问题描述 投票：0回答：1
我有删除该行的代码，并且确实有效

但

，因为我没有添加任何内容来更新火箱，它不会永久删除它（这很有意义）：

Edit：doted不必要的代码仅保留DELETE函数 这是在检查一行之后，它可以删除检查行（可以工作），但我看不到在该代码中添加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();

感谢您的任何提示/帮助。

*
update
这就是它的外观




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

enter image description here


如果我只是刷新，它会回来：

enter image description here


update添加datagrid的代码：enter image description here
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选择。



update
添加我的整个代码：
enter image description hereimport 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

    

	

因此，过滤后，您将留下用户确实要删除的项目。但是在这样做之前，我们将不得不获取用户wants
删除的项目，以便我们可以从firebase中删除它们。

您可以用以下方式替换删除按钮的on Click函数

estudiantes


reactjs

firebase

google-cloud-firestore

mui-x-data-grid


1个回答




    
    
    

        

            

                

                    
1
投票

                    

                

            

        

        
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
，因为现在我们不需要刚刚从Firebase删除的项目。 （如果您要从Firebase进行更新，则可以跳过此数据，因为新数据将不包括已删除的项目）。

请让我知道这是否是您想要的。
    
	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2025. All rights reserved.