如何使用Fetch向json-server发送POST请求，为现有对象新增键值对而非全量提交

解决方案 #

你遇到的问题核心是两点：请求方法选择错误、代码存在语法问题，按以下步骤修改即可实现预期效果：

1. 问题根源说明 #

json-server默认的POST请求仅适用于数组类型的资源，会将提交的对象作为新元素插入数组。而你的questions是对象类型，需要局部更新新增键值对，应该使用PATCH请求。

2. 现有代码错误修正 #

• 请求头的字段名写错：Content=type应为Content-Type
• JSON.stringify的入参语法错误，需要构造合法的对象：键为生成的问题ID，值为问题对象

3. 修正后的完整代码 #

const saveQuestionHandler = async () => {
  const formatedQuestion = formatQuestion(
    optionOneText,
    optionTwoText,
    activeUser
  );
  // 构造需要新增的键值对
  const postData = {
    [formatedQuestion.id]: formatedQuestion
  };
  await fetch(`http://localhost:3001/questions`, {
    method: "PATCH", // 改用PATCH请求做局部更新
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(postData),
  });
};

4. 效果验证 #

发送上述请求后，json-server会将你提交的键值对直接合并到原有的questions对象中，不会覆盖原有数据，最终结构和你预期的完全一致。

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