Antd Form 表单数据没法回显问题

发布时间 2023-11-06 16:07:39作者: 朱自清的散文集

Antd Form 表单数据没法回显问题

antd环境

4.*版本

问题复现

在一个组件中,给这个组件传递一个配置项,展示一些表单组件如 输入框、下拉框等组件,再传递一个数据,让其数据回显在我们的表单组件中

 // 就正常一个表单,里面通过循环配置项展示formitem 里的内容,我们可以在formitem中设置initvalue来给这个表单赋值,也可以通过给那些组件中设置value来给这个表单赋值,但是由于我们的表单数据是hook传递的,initvalue原理在表单初始化的时候给表单赋值,且这个initvalue必须是同步数据,不能为hook数据,因为setstate 是异步的,官方原话
  1. 你不再需要也不应该用 onChange 来做数据收集同步(你可以使用 Form 的 onValuesChange),但还是可以继续监听 onChange 事件。
  2. 你不能用控件的 value 或 defaultValue 等属性来设置表单域的值,默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新。
  3. 你不应该用 setState,可以使用 form.setFieldsValue 来动态改变表单值。

怎么解决这个问题呢?只能通过setFieldsValue?

我们可以给组件加一个loading态,当我们的数据还没准备好的时候不要让其加载我们的表单组件

    <MyRoutes
        confgi={...}
        data={...}
        loading={...}
    />

    // 组件中可以这样
    if(loading){
        return (<div>loading</div>)
    }
    return <div>我们的表单组件</div>