焦和玉 发表于 2025-6-6 15:53:04

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

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


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

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

 解决方案代码 
代码是我截取的,所以只是提供一个思路
import React, {useState, useEffect } from 'react';
import { Form, Input } from 'antd';
   
   const = useState({});
   const = useState([]) // 表单拿到的只是他需要的多余的好像也不存

   // 解决表单更新不成功问题
   useEffect(() => {
      setFields(
         Object.keys(settings).map(key => {
            return { name: key, value: settings }
         })
      )
   }, )

   useEffect(() => {
      console.log(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>
)这样解决后,就不存在不更新的问题了
 

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

溥价 发表于 2025-10-11 00:42:59

谢谢分享,试用一下

即息极 发表于 2025-11-13 03:16:41

谢谢楼主提供!

荪俗 发表于 2025-11-23 00:37:41

懂技术并乐意极积无私分享的人越来越少。珍惜

林鱼 发表于 2025-11-25 02:52:19

新版吗?好像是停更了吧。

峰邑 发表于 2025-12-13 15:43:56

yyds。多谢分享

呵桢 发表于 2025-12-23 11:54:52

感谢分享

些耨努 发表于 2026-1-17 20:33:42

感谢分享

喳谍 发表于 2026-1-18 21:25:33

感谢分享,下载保存了,貌似很强大

橘芜 发表于 2026-1-19 04:45:51

热心回复!

龙骋唧 发表于 2026-1-22 12:59:27

yyds。多谢分享

皇甫佳文 发表于 2026-1-22 19:54:06

感谢分享

剧拧并 发表于 2026-1-22 22:09:42

感谢分享

甦忻愉 发表于 2026-1-23 00:04:53

谢谢分享,试用一下

巩芷琪 发表于 2026-1-27 03:16:26

很好很强大我过来先占个楼 待编辑

夔新梅 发表于 2026-1-29 07:38:23

喜欢鼓捣这些软件,现在用得少,谢谢分享!

秦欣艷 发表于 2026-1-29 14:53:34

热心回复!

盛天欣 发表于 2026-1-30 14:48:08

这个好,看起来很实用

荦绅诵 发表于 2026-2-3 06:47:30

分享、互助 让互联网精神温暖你我

零幸 发表于 2026-2-3 11:14:37

感谢分享,学习下。
页: [1] 2 3
查看完整版本: react + Ant表单数据回调不更新