react + Ant表单数据回调不更新

刚学react,拿项目练手,有个问题恶心死了,折腾了好久,百度上也没找到很合适的,觉得有必要分享一下,不为别的,以后自己遇到了,再复习一下,方案不是最优解,但能解决问题

业务描述
      就是点击编辑,新增的时候,数据发生变化,我获取到了,第一次更新成功,后面就只会有第一次的值

代码描述
      我用的是initialValues 刚开始感觉还行,后面加入逻辑的时候麻了,不好要,翻了文档上才知道不行

 解决方案代码 
代码是我截取的,所以只是提供一个思路

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, {  useState, useEffect } from 'react';
import { Form, Input } from 'antd';
    
   const [settings, setTingsRedux] = useState({});
   const [fields, setFields] = useState([]) // 表单拿到的只是他需要的多余的好像也不存
 
   // 解决表单更新不成功问题
   useEffect(() => {
      setFields(
         Object.keys(settings).map(key => {
            return { name: key, value: settings[key] }
         })
      )
   }, [settings])
 
   useEffect(() => {
      console.log(fields, '表单改变了')
   }, [fields])
 
  return (
   <Form name="nest-messages" onFinish={onFinish} className={styles.Form} fields={fields} onFieldsChange={(_, allFields) => {
               setFields(allFields);
            }}>
        <Form.Item name='deName' label="设备名称" props="deName" rules={[{ required: true, message: '请输入设备名称' }]}>
                  <Input placeholder="placeholder" allowClear="请输入设备名称" showCount maxLength={16} />
               </Form.Item>
</Form>
)

这样解决后,就不存在不更新的问题了

 

posted @   好运的菜狗  阅读(154)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示