React表单POST请求提交至JSON Server仅生成id无内容问题求助

问题根因 #

你的代码存在语法误用错误：调用JSON.stringify时错误使用了方括号[]而非函数调用的圆括号()，导致实际传递给POST请求的body值为undefined，JSON Server接收到空的请求内容，因此只会生成自动id，不会存储你提交的字段数据。

修复方案 #

将fetch配置中body对应的行修改为正确的函数调用写法即可：

fetch("http://localhost:3001/inputData/", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  // 把[]改成()即可
  body: JSON.stringify(newInputData),
}).then((res) => {
  console.log("new post added");
  alert("Success!");
});

补充说明 #

你之前尝试的{newInputData}写法会给原始数据额外包裹一层外层对象，序列化后会把newInputData作为键存储，不符合你的存储预期，按上述修改直接序列化你构造的newInputData对象即可实现需求。建议可以额外添加catch逻辑捕获请求异常，避免提交失败无提示。

内容的提问来源于stack exchange，提问作者kelly-ghost_busters