React中Fetch POST请求json-server时JSON原有数据被全部移除如何解决

问题原因 #

json-server严格遵循REST接口语义规范：

• 当请求路径指向单一对象资源（本次/options对应JSON根节点下的options对象，不属于数组集合类资源）时，POST/PUT方法的默认行为是整体覆盖替换目标资源，请求体传入什么内容，目标资源就会被直接替换成对应内容，因此原有字段会全部丢失。
• 局部字段更新需要使用PATCH方法，该方法只会覆盖请求体内声明的字段，其余原有字段会被保留。

修复方案 #

将请求的method参数从POST改为PATCH即可，修改后代码如下：

//Update JSON
const updateOptions = async () => { 
  const res = await fetch('http://localhost:5000/options', {
    method: 'PATCH',
    headers: {
      'Content-type': 'application/json'
    },
    body: JSON.stringify({score: 10})
  })
}

修改后重新发起请求，只会更新score字段，gametype、gamecat两个原有字段会正常保留。

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