react + Ant表单数据回调不更新
cnblogs 2024-07-23 11:41:01 阅读 54
刚学react,拿项目练手,有个问题恶心死了,折腾了好久,百度上也没找到很合适的,觉得有必要分享一下,不为别的,以后自己遇到了,再复习一下,方案不是最优解,但能解决问题
业务描述
就是点击编辑,新增的时候,数据发生变化,我获取到了,第一次更新成功,后面就只会有第一次的值
代码描述
我用的是initialValues 刚开始感觉还行,后面加入逻辑的时候麻了,不好要,翻了文档上才知道不行
解决方案代码
代码是我截取的,所以只是提供一个思路
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>
)
这样解决后,就不存在不更新的问题了
下一篇: Vue与React基础开发知识点总结,如组件编写方法、权限校验方式、监听变量改变等,极其适用于后端工程师。文章结尾有极度提高开发效率的彩蛋(二次封装基于antd的前端初始化模板)。
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。