Axios 中的 HTTP PUT 请求仅返回数据的 ID答案

【问题标题】：Only the ID of data is being returned from an HTTP PUT request in AxiosAxios 中的 HTTP PUT 请求仅返回数据的 ID
【发布时间】：2020-11-23 11:37:31
【问题描述】：

我正在尝试创建一个 crud 应用程序，除了更新功能外一切正常。当我单击保存按钮以更新表中的特定数据时，我只得到 id 而所有其他字段都返回为空，我不知道我错过了什么，但响应日志显示状态 200，只有我可以'看不到我在 db.json 中所做的更改，除了每条记录没有其他数据的 id。急需帮助。谢谢！

这是我的更新代码：

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"
  }
]
}

【问题讨论】：

你也可以发布你的 db.json 吗？
已添加。谢谢@MrRay

标签： reactjs axios put json-server

【解决方案1】：

我刚刚在我的 HTTP put 请求中提供了 updatedUser 作为第二个参数，现在效果很好：

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);
    });
  };

【讨论】：