PERN栈Todo应用React提交后PostgreSQL的description为null问题

该问题与控制台输出的React 18 ReactDOM.render弃用警告无关，该警告仅为API版本提示，不会阻断业务逻辑运行。结合Postman调用接口全正常的现象，可完全排除服务端、数据库配置问题，故障点锁定在客户端提交逻辑，按优先级排查以下高频错误即可：

• 字段名不匹配
  服务端POST接口插入逻辑是从req.body.description取值，前端提交时极易出现字段名拼写错误（比如错写为discription、todo、text）、对象层级嵌套错误，后端拿不到目标字段时，插入数据库的description值就会是null。
• 受控组件状态绑定错误
  检查InputTodo.js的输入框绑定逻辑：
  1. 输入框value属性是否正确绑定存储待办内容的state变量
  2. onChange事件是否正确读取输入值更新state：常见错误为直接传入setDescription未读取e.target.value，或事件对象引用错误，导致提交时state本身就是空值/null
• fetch请求配置缺失
  若使用原生fetch发POST请求，两个高频漏写项会导致后端无法解析参数：
  1. 未添加请求头Content-Type: application/json
  2. 请求体未通过JSON.stringify()序列化为JSON字符串，直接传递了原生JS对象
     正确的请求写法参考：

  // 服务端端口为5100，注意替换为你实际的接口路径
  const res = await fetch("http://localhost:5100/todos", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ description: 待办内容对应的state变量 })
  })
  

• 跨域代理配置异常
  若客户端配置了开发环境代理转发，检查代理规则是否存在过滤、篡改POST请求体的逻辑。

快速定位技巧：打开浏览器开发者工具的「网络」面板，点击Add按钮后找到发往5100端口的POST请求，查看「请求载荷」板块的实际传参内容，10秒就能判断是传值为空、字段名错误还是请求格式错误。

1. 按上述优先级修正对应代码后，重新在页面输入待办内容提交
2. 连接数据库执行SELECT * FROM todos ORDER BY todo_id DESC LIMIT 1;，查询最新插入的记录，若description字段值与输入内容一致即为修复成功
3. React 18的render警告可后续单独修复：将src/index.js中的旧版ReactDOM.render入口写法替换为createRoot写法即可，不影响当前待办提交功能。

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