如何获取材料表中的 id？

Question

我正在使用“material-table”：“1.53.0”，带有可编辑和 onRowUpdate 选项，我想更新表中的数据。 我在用axios调用put方法，可以很好的看到tab数据但是修改任意字段的时候点击保存

我看到以下错误：

xhr.js:166 PUT http://localhost:xxxx/api/User/edit/?IdUser=1 404 (Not Found)

我意识到，无论我想更新哪一行，它总是告诉我我正在为 id 调用 1 并且没有发送 IdUser，但是因为我这样做是正确的

获取该行的idUser的方法是什么？

import React, { useState, useEffect } from 'react';
import MaterialTable from 'material-table';
import  axios  from 'axios';

export default function UserTable() {

const url='/api/Users';

const [user, setUser]= useState({DataUser:[]});


 useEffect(()=>{
    const getUser=async()=>{
            const response =await axios.get(url);
            setUser(response.data);
    }
    getUser();
},[]);

  return (
    <MaterialTable
    title="Users"
    columns={[
      {title: 'IdUser',field: 'IdUser', type: 'numeric', hidden:'false'},
      {title: 'name',field: 'name'},
      { title: 'lastname', field: 'lastname' },
      { title: 'age', field: 'age', type: 'numeric' },
    ]}
    data={user.DataUser}
    options={{
      filtering: true
    }}
    editable={{
      onRowUpdate: (newData, oldData) =>
      new Promise(resolve => {
          setTimeout(() => {
          resolve();
          const data=[...user.DataUser];
          data[data.indexOf(oldData)] = newData;
          axios.put('api/User/edit/', newData,{
                  params: {
                    id:user.DataUser[0].IdUser
                  }
              })
              .then(res => console.log(res.DataUser));
              setUser({...user,data});
      }, 600);
  }),
  }}
  />
);
}

Answer 1

您应该访问在回调中作为newData 传递的用户的ID，而不是使用user.DataUser[0].IdUser 传递第一个用户ID。

所以更改 axios 调用应该可以解决问题：

editable={{
  onRowUpdate: (newData, oldData) =>
  new Promise(resolve => {
      setTimeout(() => {
      resolve();
      const data=[...user.DataUser];
      data[data.indexOf(oldData)] = newData;
      axios.put('api/User/edit/', newData,{
              params: {
                id: newData.IdUser
              }
          })
          .then(res => console.log(res.DataUser));
          setUser({...user,data});
  }, 600);