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

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


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

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

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

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

复制代码

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！