DatePicker的onChange事件仅返回API初始值无法获取更新值如何解决

• 状态管理冲突：你同时使用了AntD Form的内置状态托管和自定义state控制DatePicker的值，Form.Item默认会自动绑定下属组件的value、onChange属性，和你手动绑定的逻辑冲突，导致值同步异常。
• setState写法错误：updateFields方法中更新state时没有保留formData的其他字段，且直接展开当前state的写法容易受闭包影响拿到旧状态，导致更新不生效。
• 异步初始值不生效：Form的initialValues仅在组件初始化和调用reset方法时生效，你异步拿到接口数据后修改state不会自动同步到Form的内置状态，导致两边状态不一致。

推荐优先使用Form托管全部表单状态，代码更简洁，也能避免状态冲突：

1. 移除DatePicker上手动绑定的value和onChange属性，交由Form.Item自动接管属性绑定
2. 接口拿到数据后，直接调用Form实例的setFieldsValue方法更新表单值，不需要额外存到自定义state中
3. 需要获取日期值时，调用form.getFieldValue('startDate')即可，表单提交时onFinish回调也会直接返回所有字段的最新值

修改后的代码示例：

接口数据处理逻辑 #

const apidata = await fetchApi()
// 直接更新Form内置状态
form.setFieldsValue({
  ...apidata,
  startDate: moment(apidata.startDate).utc()
})

表单组件代码 #

<Form
   name="update form"
   autoComplete="off"
   form={form}
>
 <Form.Item
    label="Start Date"
    name="startDate"
    rules={[{ required: true, message: "Please enter value!!!!!" }]}
>
  <DatePicker />
</Form.Item>
</Form>

如果你确实需要自定义state托管该字段：

1. 去掉Form.Item的name属性，不让Form接管该字段的状态
2. 修正setState的写法，用函数式更新避免闭包问题，同时保留formData的其他字段：

const updateFields = (data:any) => {
  setState(prev => ({
    ...prev,
    formData: {
      ...prev.formData,
      startDate: data
    }
  }))
}

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