Antd DatePicker绑定Form后设置field值时onChange函数内日期不更新问题

问题根因 #

该问题由Ant Design Form的受控接管机制导致，核心原因如下：

• 当你为<Form.Item>设置name属性（也就是你提到的提前设置field值）后，对应表单项会进入Form的完全受控模式：Form会自动为嵌套的DatePicker组件注入value和onChange属性，全权接管其值的更新、同步逻辑。
• 如果你此时又手动为DatePicker绑定自定义value（绑定自己用useState声明的日期变量）和onChange来维护外部状态，就会出现状态冲突：Form注入的value优先级高于你手动传入的value，DatePicker的实际值完全由Form内部状态控制，你自己维护的外部状态不会和Form内部状态自动同步，自然会出现onChange中读取自定义状态时拿到旧值、不更新的问题。
• 未设置name属性时，Form不会接管组件状态，DatePicker完全由你传入的value和onChange控制，所以功能运行正常。

解决方案 #

可根据业务需求任选一种方案处理：

1. 完全交由Form托管状态，不额外维护外部日期状态
   如果不需要实时监听日期变化做额外逻辑，直接移除DatePicker上绑定的自定义value和onChange即可，需要取值时调用Form实例的getFieldValue方法即可拿到最新值。
   如果需要监听日期变化，直接在DatePicker的onChange回调中取参数返回的最新值即可，不需要从自定义状态中读取：

import { Form, DatePicker } from 'antd';

const [form] = Form.useForm();

// 取值示例
const getDate = () => {
  const currentDate = form.getFieldValue('date');
  console.log(currentDate);
}

<Form form={form}>
  <Form.Item name="date" label="选择日期">
    <DatePicker 
      onChange={(date, dateString) => {
        // 直接取回调返回的date就是最新值
        console.log('最新日期：', date, dateString);
      }}
    />
  </Form.Item>
</Form>

2. 同步外部状态与Form内部状态
   如果确实需要自行维护外部的日期状态，可以通过Form的onValuesChange监听表单值变化同步更新外部状态，或者在DatePicker的onChange中同时调用Form实例的setFieldsValue方法保证两边状态一致。

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