使用MUI-X DatePicker提交产品表单时Axios 400错误求助

核心问题：字段名称不匹配 #

前端Formik表单中，产品名称对应的字段是productName，但后端createProduct函数尝试从req.body解构的是name，两者字段名完全不一致。后端必填字段校验数组requiredFields里也标注的是name，因此后端会判定name字段为空，直接返回400错误。

其他潜在问题及修复建议 #

• 前端日期处理冗余：前端onSubmit中对日期的重复转换可以简化，Formik初始值和DatePicker返回的已经是dayjs对象，直接在提交时格式化即可，无需额外再用dayjs()包裹。
• quantity初始值冲突：Formik初始值设置quantity: 0，但Yup校验要求数值为正数，用户未修改直接提交会触发校验错误，建议将初始值改为''或undefined。
• navigate用法错误：跳转无需写完整URL，直接使用相对路径navigate('/products/list-products')即可。

具体修复代码 #

前端修改（字段名对齐） #

将Formik的校验规则、初始值、表单输入框的字段名统一从productName改为name：

// 校验Schema调整
const validationSchema = Yup.object({
    name: Yup.string()
            .required("Le nom du produit est requis.")
            .matches(/^[a-zA-Z0-9À-ÿ ]+$/, "Le nom du produit doit être alphanumérique."),
    // 其余字段保持不变
});

// Formik初始值调整
initialValues: {
    name: "",
    // 其余字段保持不变
},

// 产品名称输入框调整
<TextField 
  style={marginTop} 
  id='name' 
  fullWidth 
  label='Nom du produit' 
  placeholder='Saisir le nom du produit'
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <FaGift />
      </InputAdornment>
    ),
  }}
  value={formik.values.name}
  onChange={formik.handleChange}
  error={formik.touched.name && Boolean(formik.errors.name)}
  helperText={formik.touched.name && formik.errors.name}
/>

后端优化（确保日期依赖） #

确认后端已正确引入dayjs，避免日期转换失败：

// 顶部引入dayjs
const dayjs = require('dayjs');

// 日期转换逻辑保持不变
manufacturingDate: dayjs(manufacturingDate,'YYYY-MM-DD').toDate(),
expiryDate: dayjs(expiryDate,'YYYY-MM-DD').toDate(),

验证步骤 #

1. 修改后提交表单，查看前端控制台console.log(values)，确认输出字段包含name而非productName。
2. 后端临时添加console.log(req.body)，验证接收的字段是否正确。
3. 重新测试提交，确认400错误消失，产品成功创建。

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