Question

我正在使用“ material-table”：“ 1.53.0”，并带有editable和onRowUpdate选项，我想更新表中的数据。我正在使用axios调用put方法，我可以很好地看到选项卡数据，但是在修改任何字段并单击保存后

我看到以下错误：

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

您应该从回调中作为user.DataUser[0].IdUser传递的用户访问ID，而不是通过newData传递第一个用户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);

如何在材料表中获取ID？

1 个答案: