如何实现MaterialTable行数据更新并提交到后端API完成数据库记录修改

Material-Table 的 onRowUpdate 回调默认会传入两个参数：更新后的行数据、更新前的原始行数据，你可以直接从这两个参数里拿到行id和修改后的数据，完整实现步骤如下：

1. 首先修改MaterialTable组件的editable配置，把回调参数透传：

<MaterialTable
  title="XNA Logs"
  columns={columns}
  data={data}
  editable={{
    onRowUpdate: handleRowUpdate // 不要额外包空箭头函数，否则会丢失回调参数
  }}
/>

2. 实现handleRowUpdate异步函数，调用后端PUT接口完成更新：

const handleRowUpdate = async (newData, oldData) => {
  try {
    // 发起PUT请求，将行id拼在接口路径中，更新数据放在请求体
    const res = await fetch(`/xnalogget/${newData._id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      // 直接把整行更新后的数据传给后端，包含_id字段
      body: JSON.stringify(newData)
    })
    if (!res.ok) throw new Error('接口请求失败')
    // 更新前端表格的本地数据，让页面同步显示修改后的内容
    const newTableData = [...data]
    const targetIndex = oldData.tableData.id
    newTableData[targetIndex] = newData
    setData(newTableData)
  } catch (e) {
    console.error('记录更新失败', e)
    // 可在此处添加UI错误提示，比如弹窗、toast提示
  }
}

如果你后端的PUT接口不支持路径传id，也可以直接把_id放在请求体里，后端从请求 body 中取出_id匹配数据库记录即可。

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