Есть ли какой-либо способ обновить данные строк таблицы и отправить их в серверный API?

#node.js #reactjs #mongodb #material-ui

Вопрос:

Я хочу обновить запись в базе данных из записи таблицы переднего плана, как показано на этом рисунке: введите описание изображения здесь

Я хочу, чтобы после того, как я нажму кнопку «Сохранить» на записи, вся запись должна быть обновлена в конце, вот код:

 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, но не могу этого сделать. Есть ли какой-либо метод, с помощью которого я могу передать текущий идентификатор строки и обновленные данные в серверную часть PUT API для обновления, и на серверной части он найдет идентификатор записи строки и сопоставит его с данными базы данных, а затем обновит запись.

Ответ №1:

Отредактируйте пятую последнюю строку Ранее: onRowUpdate: ()=>handleRowUpdate() >Обновлено: onRowUpdate: (Старые данные, новые данные)=>handleRowUpdate(Старые данные, новые данные)>

В функции обновления вы также получите обновленные данные и старые данные, и тогда вы сможете вызвать api.