React向Express后端传递整数时Zod验证返回undefined错误求助

兄弟，我看了你的前端代码，逻辑上没啥大问题，Zod验证报undefined大概率是后端这边的配置或者Schema结构不匹配导致的，咱们一步步排查：

• 首先检查后端Zod Schema的结构是否和前端请求体匹配
  你前端发送的请求体是嵌套结构：

  {
    "date": "2024-05-20 12:34:56",
    "eat": {
      "name": "汉堡",
      "calorie": 500,
      "protein": 20,
      "carbs": 60
    }
  }
  

  如果你后端的Zod Schema没有正确嵌套eat对象，而是直接在顶层定义calorie、protein这些字段，那肯定会报这些字段undefined——因为后端在顶层对象里找不到它们，它们都在eat下面。正确的Schema应该是这样的：

  const z = require('zod');
  
  const FoodInputSchema = z.object({
    date: z.string(),
    eat: z.object({
      name: z.string().nonempty(),
      calorie: z.number().int().positive(),
      protein: z.number().int().positive(),
      carbs: z.number().int().positive()
    })
  });
  

• 检查后端Express是否配置了JSON解析中间件
  如果后端没加express.json()，那Express根本无法解析JSON格式的请求体，req.body会是空对象，所有字段自然都是undefined。一定要在后端入口文件里加上这行：

  const express = require('express');
  const app = express();
  
  // 关键！解析JSON请求体
  app.use(express.json());
  

• 打印请求体确认后端实际收到的数据
  在你的后端POST路由里加一行日志，看看实际收到的req.body是什么样的：

  app.post('/inputfood', (req, res) => {
    console.log('实际收到的请求体:', req.body);
    // 后续的Zod验证逻辑...
  });
  

  如果打印出来的结构和前端发送的一致，那就是Schema的问题；如果是空对象或者结构不对，那就是请求解析或者前端发送的问题（不过你的前端代码看起来没问题）。

• 核对字段名拼写是否一致
  别小看这个低级错误！比如前端传的是calorie，后端Schema里写成了calories，或者protein拼写成proten，都会导致Zod找不到对应字段而报undefined。

另外，给你个前端代码的小优化建议：数值类型的state可以直接初始化为数字类型，不用字符串转来转去：

const [calorie, setCalorie] = useState(0);
// onChange的时候直接转成数字
<input 
  style={inputStyle} 
  type="number" 
  placeholder="Input Calorie cal" 
  onChange={(e) => setCalorie(Number(e.target.value))} 
/>

备注：内容来源于stack exchange，提问作者Durgesh