如何从绑定Firebase的MUI DataGrid中删除行并同步后端数据

问题修复方案 #

你遇到的删除无法同步Firebase的问题，只需要修改三处代码即可解决： #

1. 修正Firebase数据拉取逻辑，关联文档ID

你当前拉取Firebase数据时没有把文档ID存入数据的id字段，导致后续删除时找不到对应Firebase文档，修改onSnapshot监听逻辑：

const estudiantesRef = db.collection("usuarios").doc(user.uid).collection("estudiantes")
useEffect(() => {
  const unsubscribe = estudiantesRef.onSnapshot(snapshot => {
    const tempData = [];
    snapshot.forEach((doc) => {
      const data = doc.data();
      // 将Firebase文档ID存入数据的id字段，和DataGrid行ID对应
      tempData.push({...data, id: doc.id});
    });
    setEstudiantes(tempData);
  })
  // 组件卸载时取消监听避免内存泄漏
  return () => unsubscribe();
}, []);

2. 删除冲突的本地存储逻辑

你同时写了Firebase实时监听和localStorage读写的useEffect，会导致Firebase的更新被本地旧数据覆盖，直接删除下面两段代码即可：

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

// 不需要本地存储的话也可以删除这段
useEffect (() => {
  window.localStorage.setItem("estudiantes", JSON.stringify(estudiantes))
})

3. 修改删除按钮点击逻辑，同步调用Firebase删除接口

修改删除图标的onClick事件，先调用Firebase删除接口再更新前端状态：

renderHeader: () => {
  return (
    <IconButton
      onClick={() => {
        const selectedIDs = new Set(selectionModel);
        if (window.confirm('确定要删除选中的学生吗？')) {
          // 遍历选中的ID，逐个删除Firebase文档
          selectedIDs.forEach(docId => {
            db.collection("usuarios")
              .doc(user.uid)
              .collection("estudiantes")
              .doc(docId)
              .delete();
          })
          // 清空选中状态
          setSelectionModel([]);
          // 因为开启了Firebase实时监听，删除后前端会自动同步数据，本处手动更新状态可实现即时响应
          setEstudiantes((r) => 
            r.filter((x) => !selectedIDs.has(x.id))
          );
        }
      }}
    >
      <DeleteOutlinedIcon />
    </IconButton>
  );
}

数据更新逻辑参考 #

如果需要实现Firebase数据更新，可参考以下逻辑，因为你开启了onSnapshot实时监听，更新后前端会自动同步数据：

// 调用示例：updateEstudiante('文档ID', {nombre: '新名字', grado: '新年级'})
const updateEstudiante = (docId, updateData) => {
  db.collection("usuarios")
    .doc(user.uid)
    .collection("estudiantes")
    .doc(docId)
    .update(updateData);
}

内容的提问来源于stack exchange，提问作者React Enjoyer