0

我正在尝试编辑 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])
}

数据.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
    }
  ]
}

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

4

5 回答 5

1

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

setShifts(prevShifts => ([...prevShifts, data]))
于 2021-09-17T18:40:19.340 回答
1

PUT 请求应该像这样工作。

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

撇开这些不谈，这取决于您的 /shifts 端点如何实际处理。

于 2021-09-17T19:19:38.810 回答
0

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

于 2021-09-17T19:29:10.820 回答
0

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

  • 数据库为空
  • 请求 #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
}
于 2021-09-17T19:58:18.703 回答
0

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

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

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

于 2021-09-17T20:03:26.457 回答