Из запроса HTTP PUT в Axios возвращается только идентификатор данных.

Question

Я пытаюсь создать приложение crud и все работает нормально, кроме функции обновления. Когда я нажимаю кнопку сохранения, чтобы обновить определенные данные из таблицы, я получаю только идентификатор, а все остальные поля возвращаются пустыми, я не знаю, что мне не хватает, но в журнале ответов указано состояние 200, только то, что я могу Я не вижу изменений, которые я внес в свой db. json, кроме идентификатора без других данных для каждой записи. Срочно нужна помощь. спасибо!

Вот мой код обновления:

const [users, setUsers] = useState([]);
const [currentUser, setCurrentUser] = useState(initialFormState);
const [editing, setEditing] = useState(false);

const updateUser = (id, updatedUser) => {
    httpCommon.put(`/contacts/${id}`).then((response) => {
      setEditing(false);
      setUsers(users.map((user) => (user.id === id ? updatedUser : user)));
      console.log(response);
    });
  };

 const editRow = (user) => {
    setEditing(true);
    setCurrentUser({
      id: user.id,
      name: user.name,
      email: user.email,
      contact: user.contact,
    });
  };

И здесь я передаю свою пользовательскую форму редактирования.

            <Fragment>
              <h2>Edit User</h2>
              <EditUserForm
                editing={editing}
                setEditing={setEditing}
                currentUser={currentUser}
                updateUser={updateUser}
              />
            </Fragment>

Вот моя форма редактирования, которая находится в другом компоненте :

import React, { useState, useEffect } from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";

const EditUserForm = (props) => {
  const [user, setUser] = useState(props.currentUser);

  useEffect(() => {
    setUser(props.currentUser);
  }, [props]);

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setUser({ ...user, [name]: value });
  };

  return (
    <Form
      onSubmit={(event) => {
        event.preventDefault();
        props.updateUser(user.id, user);
      }}
    >
      <Form.Group controlId="formName">
        <Form.Label>Name: </Form.Label>
        <Form.Control
          type="text"
          name="name"
          placeholder="Enter name"
          value={user.name}
          onChange={handleInputChange}
          required
        />
      </Form.Group>
      <Form.Group controlId="formUser">
        <Form.Label>User </Form.Label>
        <Form.Control
          type="text"
          name="contact"
          placeholder="Enter contact number"
          value={user.contact}
          onChange={handleInputChange}
          required
        />
      </Form.Group>
      <Form.Group controlId="formEmail">
        <Form.Label>Email: </Form.Label>
        <Form.Control
          type="email"
          name="email"
          placeholder="Enter email"
          value={user.email}
          onChange={handleInputChange}
          required
        />
      </Form.Group>
      <Button variant="primary" type="submit">
        Save
      </Button>
      <Button
        onClick={() => props.setEditing(false)}
        className="button muted-button"
      >
        Cancel
      </Button>
    </Form>
  );
};

export default EditUserForm;

Вот мой json файл:

{
  "users":[
  {
    "id": 1,
    "name": "test",
    "email": "test@test.com",
    "contact": "1234545"
  }
]
}

Answer 1

Я только что предоставил updatedUser в качестве второго аргумента в моем HTTP-запросе на размещение, как это, и теперь он работает хорошо:

const updateUser = (id, updatedUser) => {
    httpCommon.put(`/contacts/${id}`, updatedUser).then((response) => {
      setEditing(false);
      setUsers(users.map((user) => (user.id === id ? updatedUser : user)));
      console.log(response);
    });
  };