React DatePicker问题排查：选择未来日期时表单字段不显示

问题原因 #

• 日期选择时状态被完全覆盖：handleDateChange函数更新状态时，未保留原状态中的name、service、cost字段，直接替换为仅包含date的对象。用户选择未来日期时触发该函数，导致提交给后端的请求仅含date字段，其他字段丢失；而选择当前日期且未修改时，handleDateChange不触发，原状态完整，所有字段能正常提交展示。
• 删除函数参数错误：ConfirmBooking中的deleteHandler接收整个booking对象，但接口需要的是id，导致删除请求无效。
• 提交校验逻辑无效：Form中的if (myState !== "")判断无意义，因为myState是对象，永远不会等于空字符串。

修复方案 #

1. 修复日期变更时的状态更新逻辑 #

修改Form组件的handleDateChange函数，用扩展运算符保留原状态所有字段，仅更新date：

const handleDateChange = (date) => {
  setMyState({
    ...myState, // 保留原状态的其他字段
    date: date
  })
}

2. 修复删除函数的参数传递 #

修改ConfirmBooking组件的删除按钮点击事件，传递booking的id而非整个对象：

<button className='Btn' onClick={() => deleteHandler(data.at(-1).id)}>Delete</button>

同时更新deleteHandler函数，确保删除后重新获取数据更新页面：

const deleteHandler = (id) => {
  axios
    .delete(`http://localhost:5000/api/bookings/${id}`)
    .then(res => {
      console.log(res.data);
      // 删除后重新拉取数据
      axios.get('http://localhost:5000/api/bookings')
        .then(res => setData(res.data))
        .catch(err => console.log(err))
    })
    .catch(error => {
      console.log(error)
    })
}

3. 优化提交校验逻辑 #

替换Form中无效的校验逻辑，改为检查必填字段（例如姓名）：

const handleSubmit = (e) => {
  e.preventDefault();
  if (!myState.name.trim()) {
    alert('请填写姓名');
    return;
  }
  alert('booking success');
  // 后续提交逻辑不变
}

4. 可选：统一日期格式（避免后端处理问题） #

若后端无法直接处理Date对象，可在提交前将日期转为字符串：

const handleSubmit = (e) => {
  e.preventDefault();
  if (!myState.name.trim()) {
    alert('请填写姓名');
    return;
  }
  // 转换日期格式
  const submitData = {
    ...myState,
    date: myState.date.toISOString()
  };
  axios.post('http://localhost:5000/api/bookings', submitData)
    .then(res => {
      setMyState(res.data);
      console.log(res);
      navigate('/ConfirmBooking')     
    })
    .catch((error) => {
      console.log(error)
    })
}

验证修复效果 #

1. 选择未来日期并填写所有字段后提交，ConfirmBooking页面应完整展示所有字段信息。
2. 点击删除按钮，对应记录应被正确删除，页面数据同步更新。
3. 未填写姓名时提交，会弹出提示阻止提交。

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