React.js使用@material-ui/pickers选择日期后报错问题求助

• 项目表单新增日期选择字段，使用new Date()设置默认日期时组件运行正常，但选中任意日期后立即触发报错
• 此前使用TextField组件功能正常，但无法直接设置当前日期为默认值，因此替换为@material-ui/pickers提供的KeyboardDatePicker组件
• 控制台输出日期组件类型不匹配相关报错

KeyboardDatePicker组件和普通文本输入框的行为存在核心差异，原有适配普通输入框的逻辑完全不匹配：

1. 组件onChange回调不返回标准DOM事件对象，第一个入参直接是用户选中的Date实例，原有代码读取e.target.name、e.target.value会直接拿到undefined，触发类型错误
2. 组件value属性要求传入Date类型或合法的可解析日期值，原有代码手动拼接的MM/DD/YYYY格式字符串和组件配置的DD/MM/YYYY格式不匹配，会触发组件内部日期解析错误
3. 原代码存在基础语法问题：useState未从react导入、handleSubmit/setError方法未定义、axios请求头的Content-Type存在拼写错误、header字段应为复数形式headers

1. 调整状态初始值，直接存储Date对象，不要提前手动拼接日期字符串
2. 单独为日期选择器编写值变更逻辑，不要复用普通输入框的事件处理函数
3. 补全缺失的依赖导入，修正代码拼写错误
4. 向后端提交数据时，再把Date对象格式化为需要的字符串格式

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { KeyboardDatePicker} from '@material-ui/pickers';

export default function DonorForm ({showForm})  {
  const navigate = useNavigate();
  const [error, setError] = useState(false);
  // 初始值直接存储Date对象供组件使用
  const [donors, setDonors] = useState({
    donateDate: new Date()
  });

  // 普通文本输入框复用的事件处理逻辑
  const handleInputs = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setDonors({...donors, [name]: value });
  };

  // 单独处理日期选择器的值变更
  const handleDateChange = (selectedDate) => {
    setDonors(prev => ({
      ...prev,
      donateDate: selectedDate
    }))
  }

  const handleFormSubmit = async (e) => {
    e.preventDefault();
    const { donateDate } = donors;
    // 提交给后端时再格式化日期为需要的字符串格式
    const formattedDate = `${donateDate.getDate()}/${donateDate.getMonth()+1}/${donateDate.getFullYear()}`
    try {
        const config = {
          headers: {
            "Content-Type": "application/json",
          },
        };
        const { data } = await axios.post(
          "http://localhost:4000/donorsform",
          {donateDate: formattedDate},
          config
        );
        localStorage.setItem("donorsInfo", JSON.stringify(data));
        navigate("/coordinators/myprojects");
        
    } catch (error) {
      setError(true);
    }
  };

  return(
    <>
      <div className="card-header ">
        <h3 className="card-title my-1">Donor Details</h3>
      </div>
      <form 
        onSubmit={handleFormSubmit}
        method="POST"
        className="form-horizontal "
        id="register-form"
      >
        <div className="card-body">
          <div className="row">
            <div className="form-group">
              <label className="form-label col">Date</label>
              <div>
                <KeyboardDatePicker
                  autoOk
                  variant="inline"
                  inputVariant="outlined"
                  name="donateDate"
                  format="DD/MM/YYYY"
                  value={donors.donateDate}
                  InputAdornmentProps={{ position: "start" }}
                  onChange={handleDateChange}
                />
              </div>
            </div>
          </div>
        </div>
        <div className="card-footer">
          <button type="submit" className="btn-hover-1 color-3">
            Submit
          </button>
        </div>
      </form>
    </>
  );
};

如果项目中使用了react-hook-form做表单管理，建议搭配Controller组件封装日期选择器，不需要手动绑定value和onChange，可进一步减少类型适配问题。

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