Ant Design v4 Form.Item 下有多层包裹导致表单无法正确回填数据

Form.Item 下有多层包裹导致表单无法正确回填数据

在 Ant Design v4 中，如果 Form.Item 下有多层包裹（例如 Input 被包裹在 div 或其他组件中），可能会导致表单无法正确回填数据。这是因为 Form.Item 需要通过 name 属性找到直接子组件（如 Input）来绑定值。

解决方案

• 使用 Form.Item 的 shouldUpdate 属性

import React from 'react';
import { Form, Input } from 'antd';

function AppComp() {
   const [form] = Form.useForm();
  	useEffect(() => {
      (async () => {
        const result: any = await getData();
        form.setFieldsValue(result.data);
      })();
  	});
  	return <>
  		 <Form form={form}>
            <Form.Item 
                shouldUpdate={(prevValues, curValues) => prevValues.username !== curValues.username } 
            >
                {
                  ({ getFieldValue }) => (
                    <div>
                      <Input value={getFieldValue('username')} onChange={(e) => form.setFieldsValue({ username: e.target.value })} />
                    </div>
                  )
                }
            </Form.Item>
        </Form>
  	</>
}