北屋教程网

专注编程知识分享,从入门到精通的编程学习平台

AntDesign Form 组件 initialValues 与 setFieldsValue 的应用场景

在 ReactTS 结合 AntDesign 的项目中,使用 Form 组件时,组件的属性 initialValues 与组件实例方法 setFieldsValue 都可以为 Form 填充数据,但从使用时机数据更新机制角度看,存在明显区别:

特性

initialValues

form.setFieldsValue

作用时机

仅在表单初始化时生效一次

表单生命周期内任意时刻动态更新

数据来源

适用于同步静态数据

适用于动态/异步数据(API 返回数据)

更新机制

无法响应后续数据变化

可多次调用,实时更新表单值

典型场景

表单默认值、编辑页面的初始数据(非异步)

异步加载数据后回填、联动更新字段

如果使用 useState 存储表单数据且初始状态为空值,需根据数据获取方式决定:

场景 1:初始数据为空,且后续无异步数据

·可直接使用 initialValues:

const [form] = Form.useForm()
const [formData, setFormData] = useState<FromDataType | null>(null)
<Form form={form} initialValues={formData}>...</Form>

场景 2:初始数据为空,但需异步加载数据后回填

如果希望表单字段在异步数据加载完成前先以空值或其他默认值初始化(避免字段未定义导致的 ReactTS 警告),则需要设置 initialValues

·组合使用 initialValues + form.setFieldsValue

const [form] = Form.useForm()
const [formData, setFormData] = useState<FromDataType | null>(null)

useEffect(() => {
	(async () => {
  	const response = await getSomethingAPI()
    form.setFieldsValue(response.data)
  })()
}, [])

return <Form form={form} initialValues={{}}>...</Form>

场景 3:需要实时同步表单数据到 State

如果异步数据加载完成前,表单字段不需要任何值,则可以直接在数据返回后通过 form.setFieldsValue 回填

·使用 onValuesChange 监听表单字段值的状态变化

const [form] = Form.useForm()
const [formData, setFormData] = useState<FromDataType | null>(null)

useEffect(() => {
	(async () => {
  	const response = await getSomethingAPI()
    form.setFieldsValue(response.data)
  })()
}, [])

return <Form form={form} onValuesChange={(_, all) => setFormData(all)}>
  ...
 </Form>

避免使用 useState 驱动或直接修改 initialValues

1、AntDesign Form 组件内部已经管理状态,手动使用 State 更新可能导致冗余渲染或冲突

2、使用 form.resetFields 方法,表单数据会回退到 initialValues 状态

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言