有什么方法可以更新表格行数据并发送到后端 API 吗？答案

【问题标题】：Is there any method to update the table row data and send to the back-end API?有什么方法可以更新表格行数据并发送到后端 API 吗？
【发布时间】：2021-11-26 12:32:11
【问题描述】：

我想从前端表记录更新数据库中的记录，如下图所示：

我希望在我点击记录上的保存按钮后，整个记录应该在后端更新代码如下：

export default function AdminXnaLog() {
  const [data, setData] = useState([]); //table data
var columns = [
    {title: "id", field: "_id", hidden: true},
    {title: "Member No", field: "memberno"},
    {title: "Name", field: "name"},
    {title: "Surname", field: "surname"},
    {title: "XNA Description", field: "description"},
    {title: "XNA Withdraw", field: "xnawithdraw"},
    {title: "XNA Deposit", field: "xnadeposit"},
    {title: "XNA Balance", field: "balance"},
    {title: "Date", field: "date"}
    ]
useEffect(() => {
        async function fetchBooks() {
          const response = await fetch('/xnalogget');
          const json = await response.json();
          setData(json.xl);
          console.log(json.xl)
      }
      fetchBooks();
  },[]);
return (
    <MaterialTable
  title="XNA Logs"
  columns={columns}
  data={data}
   editable={{
    onRowUpdate: ()=>handleRowUpdate()
  }}
/>  
  )
}

我正在尝试实现 handleRowUpdate 函数，但我无法这样做。有什么方法可以将当前行ID和更新数据传递给后端PUT API进行更新，在后端它会找到行记录的ID并与数据库数据匹配，然后更新记录。

【问题讨论】：

标签： node.js reactjs mongodb material-ui

【解决方案1】：

在倒数第五行编辑以前：onRowUpdate: ()=>handleRowUpdate() 更新：onRowUpdate: (oldData, newData)=>handleRowUpdate(oldData, newData)

在更新函数中你会得到更新数据和旧数据，然后你可以调用api。

【讨论】：