如何将editedRows从DataGrid MUI更新到firebase?

2024-04-20

如何将刚刚编辑的值更新到 firebase? 到目前为止,这是我从 editRow 中了解到的(如果我错了,请纠正我)。

数据网格内部

//Enable edit mode for row and not cell
editMode="row"

//any update you do in the row is stored in this variable so when you finish it overrides
//w/e you had there with editRowsModel value
editRowsModel={editRowsModel}

//Calls for the function that will be handeling the updates and the all the updates into "model"
onEditRowsModelChange={handleEditRowsModelChange}

//For Double Click + Control 
//(That way if uses double click by mistake it doesn't enable editMode)
onCellDoubleClick={(params, event) => {
        if (!event.ctrlKey) {
          event.defaultMuiPrevented = true;
        }
      }}

Const

//Variable that will hold the edited variable
const [editRowsModel, setEditRowsModel] = React.useState({});

//Edit function
const handleEditRowsModelChange = React.useCallback((model) => {
  setEditRowsModel(model);
}, []);

现在,在“编辑”功能中,我应该编辑该行,但如何更新到 firebase? 就像我有这个:

const [editRowsModel, setEditRowsModel] = React.useState({});
const handleEditRowsModelChange = React.useCallback((model) => {
  setEditRowsModel(model);
  console.log(model.uid)
  /*
   estudiantes.filter( x => {
     const temporalQuery = db.collection("usuarios").doc(user.uid).collection("estudiantes").doc(x.uid);
     temporalQuery.update({
       nombre: model.nombre,
       colegio: model.colegio,
       grado: model.grado
      })
    })
*/
}, []);

但是这不起作用,因为我看不到模型中的各个值,因为它只是说“未定义”,否则这会起作用。如何获得模型的个体值?

因为未定义,所以当我尝试该代码时会收到错误。

欢迎任何帮助/提示。

模型如何记录

console.log(model)
console.log(model.name)
console.log(model[0].name)

我不确定我是否正确理解你的问题,但如果你想访问编辑行数据,可以这样做:

const [editRowsModel, setEditRowsModel] = React.useState({});
const [editRowData, setEditRowData] = React.useState({});

const handleEditRowsModelChange = React.useCallback(
  (model) => {
    const editedIds = Object.keys(model);

    // user stops editing when the edit model is empty
    if (editedIds.length === 0) {
      alert(JSON.stringify(editRowData, null, 4));
      // update on firebase
    } else {
      setEditRowData(model[editedIds[0]]);
    }

    setEditRowsModel(model);
  },
  [editRowData]
);

console.log(editRowData);

return (
  <div style={{ height: 300, width: "100%" }}>
    <DataGrid
      rows={rows}
      columns={columns}
      editMode="row"
      editRowsModel={editRowsModel}
      onEditRowsModelChange={handleEditRowsModelChange}
    />
  </div>
);

现场演示

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将editedRows从DataGrid MUI更新到firebase? 的相关文章

随机推荐