Ant Design Mobile DatePicker 报错 defaultValue will not work on controlled Field

错误信息

[antd-mobile: Form.Item] defaultValue will not work on controlled Field. You should use initialValues of Form instead.

错误原因

在DatePicker上定义的defaultValue不会受React的useState控制。

const [date, setDate] = useState(new Date);

<Form layout='vertical'>
    <Form.Item
        name='date'
        label='日期'
        trigger='onConfirm'
        onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
            datePickerRef.current?.open()
        }}
    >
        <DatePicker value={date} defaultValue={date}>
            {
                value => {
                    setDate(value);
                    return formatDate(value);
                }
            }
        </DatePicker>
    </Form.Item>
</Form>

解决

在Form.Item上定义initialValue并传入useState定义的变量。

const [date, setDate] = useState(new Date);

<Form layout='vertical'>
    <Form.Item
        name='date'
        label='日期'
        trigger='onConfirm'
        onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
            datePickerRef.current?.open()
        }}
        initialValue={date}
    >
        <DatePicker value={date}>
            {
                value => {
                    setDate(value);
                    return formatDate(value);
                }
            }
        </DatePicker>
    </Form.Item>
</Form>