React.js使用fetch POST提交JSON数据时API端收到空值如何解决

• 请求体结构和服务端预期不匹配
  你当前提交的请求体是JSON.stringify({ searchCases })，实际发送的结构是顶层包裹了searchCases键的对象：

{
  "searchCases": { /* 你的实际数据 */ }
}

如果服务端预期直接接收searchCases内部的字段作为顶层参数，就会无法匹配到对应字段，拿到的所有值都是null。你可以改成body: JSON.stringify(searchCases)尝试，确认是否是结构嵌套问题。

• 服务端未正确配置JSON请求解析逻辑
  大部分后端框架默认不会自动解析Content-Type: application/json类型的请求体，需要手动开启对应配置：
  • Node.js Express/Koa 框架需要开启express.json()/koa-bodyparser中间件
  • Java SpringBoot 框架需要在接口参数前加@RequestBody注解
  • PHP 框架需要从php://input读取原始流再解析JSON，不能直接用$_POST
  • Django 框架不能用request.POST取JSON参数，需要从request.body解析
    如果服务端没有做对应配置，解析出来的请求参数就是空的，所有字段返回null。
• 实际发送的请求体不符合预期
  console.log(searchCases)打印的是引用类型对象，控制台展示的是你展开时的最新值，可能执行JSON.stringify的时候searchCases还未完成赋值处于空状态。你可以在fetch调用前加一行console.log('实际发送内容：', JSON.stringify({searchCases}))，或者打开浏览器F12网络面板，查看该POST请求的「请求载荷」部分，确认实际发送的内容是否和预期一致。
• 请求接口匹配错误
  你代码中请求的接口路径是/api/cases/create_search，但错误日志中打印的接口路径是/api/cases/create_search_case，二者不一致。如果请求发送到了错误的接口，该接口没有对应接收参数的逻辑，也会返回全null的结果。

补充：你现有代码中的响应处理逻辑存在错误，await response不会返回实际的响应数据，需要调用对应的解析方法：比如const data = await response.json()才能拿到服务端返回的JSON数据，不过该问题不影响请求发送的参数解析。

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