React+Django REST Framework无法更新date_of_birth字段求助

你遇到的核心问题是react-datepicker返回的Date对象直接通过FormData提交时，会被序列化为无效的字符串格式，DRF的DateTimeField无法解析这个格式，导致接口验证失败，表单提交受阻。

以下是具体修复步骤：

1. 修复提交时的日期格式转换 #

在handleSubmit中，将Date对象转换为DRF能识别的ISO 8601格式字符串后，再添加到FormData：

const handleSubmit = async (event) => {
  event.preventDefault();
  const formData = new FormData();
  formData.append("name", name);
  formData.append("location", location);
  formData.append("favourite_location", favourite_location);
  // 关键修复：将Date对象转为ISO字符串，null则跳过或传空值
  if (date_of_birth) {
    formData.append("date_of_birth", date_of_birth.toISOString());
  }
  formData.append("bio", bio);

  // 剩余代码保持不变...
};

2. 处理初始化时的日期格式 #

从DRF后端获取的date_of_birth是字符串格式，需要转为Date对象才能被react-datepicker正确识别，修改useEffect中的数据赋值逻辑：

setProfileData({
  name,
  location,
  favourite_location,
  date_of_birth: date_of_birth ? new Date(date_of_birth) : null, // 转换为Date对象
  bio,
  image,
});

3. 优化DatePicker组件属性 #

react-datepicker不需要value属性（它通过selected控制选中值），且rows属性对日期选择器无效，移除冗余属性：

<DatePicker
  selected={date_of_birth}
  onChange={handleDateChange}
  name="date_of_birth"
/>

问题根源说明 #

当你直接把Date对象通过formData.append("date_of_birth", date_of_birth)添加时，浏览器会自动将Date对象转为[object Date]字符串，DRF的DateTimeField无法解析这个格式，导致接口返回验证错误，表单提交失败。而移除该字段后，其他字段都是字符串格式，能正常被DRF解析，所以提交流程恢复正常。

内容的提问来源于stack exchange，提问作者chris-t93