React获取用户日期存入MongoDB时为null的问题求助

问题根源 #

提交请求时startedOn和dueDate字段始终为空，核心原因是日期选择器的状态没有同步到提交用的employeeName对象中：

• 日期被存在单独的startDate、endDate状态里，但提交时却从employeeName中取值，而employeeName里的这两个字段始终是空字符串
• 日期状态的更新逻辑错误，初始值是Date类型，后续更新成了包含startDate/endDate属性的对象，导致DatePicker的value取值异常

前端代码修改方案 #

1. 简化状态管理 #

删除单独的startDate、endDate状态，直接把日期字段整合到employeeName中：

// 移除以下两行单独的日期状态
// const [startDate, setStartDate] = useState(new Date());
// const [endDate, setDueDate] = useState(new Date());

const [employeeName, setEmployeeName] = useState({
  taskName: "",
  assignTo: "",
  startedOn: new Date(), // 初始化为当前日期
  dueDate: new Date(),
  taskDescription: "",
  requiredFiles: "",
});

2. 修改DatePicker的绑定逻辑 #

直接在DatePicker的onChange中更新employeeName对应的字段，不需要额外的日期更新函数：

<div className="Time">
  <LocalizationProvider dateAdapter={AdapterDateFns}>
    <DatePicker
      className="form-btn startedOn"
      label="Started On"
      type="date"
      value={employeeName.startedOn}
      onChange={(newValue) => {
        setEmployeeName(prev => ({ ...prev, startedOn: newValue }));
      }}
      renderInput={(params) => <TextField {...params} />}
    />
  </LocalizationProvider>
  <LocalizationProvider dateAdapter={AdapterDateFns}>
    <DatePicker
      className="form-btn startedOn"
      label="Due Date"
      value={employeeName.dueDate}
      onChange={(newValue) => {
        setEmployeeName(prev => ({ ...prev, dueDate: newValue }));
      }}
      renderInput={(params) => <TextField {...params} />}
    />
  </LocalizationProvider>
</div>

3. 移除无用函数 #

删除changeStartDate和changeDueDate两个函数，现在已经不需要它们了。

验证修改效果 #

提交表单时，employeeName中的startedOn和dueDate会携带用户选择的日期，JSON.stringify会将Date对象转为ISO格式字符串，后端mongoose会自动将其解析为MongoDB的Date类型，最终数据库中就能正确保存日期值。

额外注意事项 #

• 如果需要自定义日期格式，可以在提交前将Date对象转为指定格式的字符串（比如YYYY-MM-DD），但mongoose默认支持ISO字符串转Date，无需额外处理
• 后续可以在提交前增加日期字段的非空校验，避免空值提交

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