非Pro版MUI X Data Grid如何实现特定行编辑并同步Firebase数据

报错原因 #

getRowMode、setRowMode这类行模式控制API属于Pro版专属功能，你使用的MIT开源免费版@mui/x-data-grid并不提供该API，所以报错不是代码实现问题，是版本功能限制。

免费版实现方案 #

免费版完全可以实现外部按钮控制的行编辑功能，不需要购买Pro版，只需手动维护编辑状态替代Pro版专属API即可，核心修改点如下：

1. 替换编辑状态管理 #

删除原来的Pro版相关状态，新增自定义编辑行ID状态：

// 新增状态存储当前正在编辑的行ID，null表示无行处于编辑状态
const [editingRowId, setEditingRowId] = useState(null);

2. 修改编辑状态判断逻辑 #

把动作列中判断编辑状态的逻辑替换为自定义状态判断：

{
  field: 'actions',
  type: 'actions',
  headerName: '操作',
  width: 100,
  cellClassName: classes.actions,
  getActions: ({ id }) => {
    // 替换原来的apiRef.current.getRowMode判断
    const isInEditMode = editingRowId === id;

    if (isInEditMode) {
      return [
        <GridActionsCellItem
          icon={<SaveIcon />}
          label="保存"
          onClick={handleSaveClick(id)}
          color="primary"
        />,
        <GridActionsCellItem
          icon={<CancelIcon />}
          label="取消"
          className={classes.textPrimary}
          onClick={handleCancelClick(id)}
          color="inherit"
        />,
      ];
    }

    return [
      <GridActionsCellItem
        icon={<EditIcon />}
        label="编辑"
        className={classes.textPrimary}
        onClick={handleEditClick(id)}
        color="inherit"
      />,
      <GridActionsCellItem
        icon={<DeleteIcon />}
        label="删除"
        onClick={handleDeleteClick(id)}
        color="inherit"
      />,
    ];
  },
},

3. 调整事件处理函数 #

修改对应编辑、保存、取消的处理逻辑，对接Firebase更新：

const handleEditClick = (id) => (event) => {
  event.stopPropagation();
  setEditingRowId(id);
};

const handleSaveClick = (id) => (event) => {
  event.stopPropagation();
  // 读取表格内修改后的行数据
  const editedRow = apiRef.current.getRow(id);
  // 同步更新到Firebase
  const temporalQuery = db.collection("usuarios").doc(user.uid).collection("estudiantes").doc(id);
  temporalQuery.update({
    nombre: editedRow.nombre,
    colegio: editedRow.colegio,
    grado: editedRow.grado
    // 其他需要更新的字段按需补充
  }).then(() => {
    // 更新成功后退出编辑状态，同步更新本地rows数据即可避免修改回退
    setEditingRowId(null);
    // 此处可触发estudiantes数组重新拉取Firebase最新数据，或手动更新本地数组
  }).catch(err => {
    // 可自行添加更新失败的提示逻辑
    console.error("数据更新失败：", err);
  });
};

const handleCancelClick = (id) => (event) => {
  event.stopPropagation();
  setEditingRowId(null);
};

4. 配置可编辑列 #

所有需要支持编辑的列，将editable属性改为动态判断：

// 以姓名列为例，其他需要编辑的列同理
{
  field: 'nombre',
  headerName: '姓名',
  editable: (params) => params.id === editingRowId,
  width: 150
},

5. 调整DataGrid配置 #

删除组件上绑定的onRowEditStart、onRowEditStop属性，保留editMode="row"和apiRef配置即可。

编辑数据回退问题解决 #

原来编辑后数据自动恢复是因为表格的编辑状态只是本地临时状态，没有同步到你绑定的rows数据源，只要Firebase更新成功后同步更新本地的estudiantes数组，表格就会显示最新的修改内容，不会出现回退。

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