React 使用Hooks时, Form表单数据回显问题

问题描述:React 项目中,使用antd 4.x版本,文章编辑时,拿到了数据,但却不回显

 

 

Form表单要回显数据一般会想到的是initialValues,但是只有初始化以及重置时生效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<Form
        name="wrap"
        labelCol={{ flex: '70px' }}
        colon={false}
        form={form}
        initialValues={{ title, subTitle }}
        >
        <Form.Item label="标题:" name="title" rules={[{ required: true,message: '请输入标题!' }]}>
          <Input />
        </Form.Item>
        <Form.Item label="副标题:" name="subTitle">
          <Input />
        </Form.Item>
        <Form.Item>
          <WangEditor content={content} setContent={setContent} />
        </Form.Item>
  </Form>

  

使用Hooks,初始化定义title,subTitle,

使用setTtitle,setSubTitle 赋值没有成功,

原因是:setTitle 和setSubTitle 是异步的

 

1
2
3
4
5
6
7
8
9
10
useEffect(() => {
    if(params.id) {
      lookArticleApi({id:params.id}).then(res => {
        console.log(res)
        setContent(res.data.content)
        setTitle(res.data.title)
        setSubTitle(res.data.subTitle)
      })
    }
  },[])

 

查找 antd 发现:

 于是使用form.setFieldsValue来重新获取值,页面数据回显成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
useEffect(() => {
    if(params.id) {
      lookArticleApi({id:params.id}).then(res => {
        console.log(res)
        setContent(res.data.content)
        // setTitle(res.data.title)
        // setSubTitle(res.data.subTitle)
        form.setFieldsValue({
          title: res.data.title,
          subTitle: res.data.subTitle
        })
      })
    }
  },
posted @   王大师  阅读(2126)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
点击右上角即可分享
微信分享提示