React调用PUT更新排班JSON数据时未修改字段被删除是什么原因

问题原因 #

你遇到的未修改字段丢失问题核心原因如下：

1. 请求方法语义不符合需求 #

你使用的JSON Server后端默认遵循RESTful规范：PUT方法的作用是用请求体传入的内容完整替换对应ID的原有资源。你现在传入的changed参数只包含修改过的字段，后端会直接用这部分字段覆盖整条记录，未传入的字段就会被直接清除。
如果要实现仅更新指定字段、保留其余原有字段的局部更新，应该改用PATCH方法，PATCH的语义就是局部修改资源，JSON Server收到PATCH请求只会更新你传入的字段，不会改动其他未传的字段。

2. 额外的React状态更新逻辑错误 #

你当前更新shifts状态的代码setShifts([...shifts, data])存在逻辑问题：这会把更新后的班次追加到原有数组末尾，而不是替换原有同ID的旧班次，后续页面会同时出现新旧两条同ID的班次数据，需要同步修正。

修正后的代码 #

const editShift = async (changed, id) => {
  const res = await fetch(`http://localhost:5000/shifts/${id}`, {
    method: 'PATCH', 
    headers: {
    'Content-type': 'application/json' 
    },
    body: JSON.stringify(changed)
 })
 const updatedShift = await res.json()
 // 替换对应ID的旧班次，而非追加新条目
 setShifts(shifts.map(shift => shift.id === id ? updatedShift : shift))
}

如果你坚持要用PUT方法实现，需要先查询对应ID的完整旧班次数据，把修改字段合并到完整对象后再传入PUT请求，不过这种方案多了一次查询请求，效率低于直接使用PATCH。

内容的提问来源于stack exchange，提问作者Kahalon