Http PUT 删除未更改的数据

Question

我正在尝试编辑 JSON 班次数据库。我正在使用 React 在 Javascript 中写作。这是我对 PUT 语法的理解：

const editShift = async (changed, id) => {

  const res = await fetch(`http://localhost:5000/shifts/${id}`, {
    method: 'PUT', 
    headers: {
    'Content-type': 'application/json' 
    },
    body: JSON.stringify(changed)
 })
 const data = await res.json()
 setShifts([...shifts, data])
}

data.json:

{
  "shifts": [
    {
      "title": "test",
      "startDate": "2018-06-25T07:30:00.000Z",
      "endDate": "2018-06-25T08:00:00.000Z",
      "allDay": false,
      "id": 1
    },
    {
      "title": "test2",
      "startDate": "2018-06-28T07:30:00.000Z",
      "endDate": "2018-06-28T08:00:00.000Z",
      "allDay": false,
      "id": 2
    }
  ]
}

结果是新班次将仅保留已更改的字段并删除其余字段。有什么想法吗？

Answer 1

要获得之前的班次，您应该在 setShifts 中使用回调，例如：

setShifts(prevShifts => ([...prevShifts, data]))

Answer 2

PUT 请求应该像那样工作。

PUT 请求应该将数据放入旧记录的位置。您可能希望使用 PATCH 请求仅在旧记录上修补数据。

搁置一边，这取决于您的 /shifts 端点如何实际处理。

Answer 3

我不得不将整个更新的班次发送到已更改的字段中，其中的字段未更改。我不知道为什么，但它工作得很好。

Answer 4

对于这样的问题，如果您发布前后数据示例会很有帮助

数据库为空
请求 #1，负载等于 X
请求 #2，负载等于 Y

此外，了解您的服务器处理程序正在做什么将有助于确定发生了什么。我感觉发生的事情是这样的

// API handler
(req) => {
  const dbData = getDBData();
  dbData.shifts = req.shifts; // overwrite old with new
}

当你需要的是

(req) => {
  const dbData = getDBData();
  req.shifts.forEach((newShiftData) => {
    const shiftId = newShiftData.id;

    if (dbData[shiftId]) {
      dbData[shiftId] = { ...dbData[shiftId], ...newShiftData }; // merge old with new
    }
  });

  // - check if data changed
  // - update DB
}

Answer 5

PUT 请求替换目标 URI 中的所有数据。它们不会自动合并更改。

不清楚您是此 API 的作者还是只是消费者，但如果您正在使用 API，您应该寻找其他 API您只发送编辑（HTTP 方法可能是 POST 或 PATCH），或者您需要发送整个班次列表。

或者，也可能每个班次都有一个特定的端点，因此您可以向班次端点发送 1 个 PUT 请求，只是为了编辑该特定端点。

Http PUT 删除未更改的数据

Http PUT deletes data that hasn't been changed

javascript

put

httprequest

reactjs