【antd】form表单默认值设置
阅读原文时间:2023年07月08日阅读:1

在antd的form表单的api里面有个"initialValues"可以设置默认值.但是表单没有更新

  <Form  
      name="test"  
      form={form}  
      labelCol={{ span: 6 }}  
      wrapperCol={{ span: 16 }}  
      initialValues={data}  //此处设置"data"为默认值  
    >  
      <Form.Item name="name" label="姓名" required={true}>  
        <Input.TextArea  
          autoSize={{ minRows: 1, maxRows: 3 }}  
        ></Input.TextArea>  
      </Form.Item>  
    </Form>

但是,正如官网所说

表单默认值,只有初始化以及重置时生效

也就是说比如详情页,data为调结果返回的结果,data本身就有默认值,然后接口返回之后更新data值.那么其结果是页面没有更新,详情页form表单在页面上还是空.为啥?

因为"initialValues"只是初始化,所以它只设置了data的原始默认值,而调接口之后虽然data更新了,但是"initialValues"并不会更新.所以表单也不会更新

1.form表单中有另一个api可供选择--setFieldsValue.其功能是更新form表单值.所以,我们只需要监听data值的变化,然后更新form表单值即可.

useEffect(() => {
form.setFieldsValue(data)
}, [data]);

2.确认data更新之后再渲染页面.

{data?

:null}

第一次页面并没有渲染东西,但是只要data变化了,页面就会重新渲染一个默认值是data的表单,form表单也就无需更新.