首页 > 其他分享 >react + Ant表单数据回调不更新

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

时间:2024-07-23 11:32:52浏览次数:5  
标签:react settings fields 表单 Ant useState key

刚学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>
)

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

 

标签:react,settings,fields,表单,Ant,useState,key
From: https://www.cnblogs.com/aowu666/p/17462471.html

相关文章

  • Electron 和 React 开发桌面应用程序
    目录书籍推荐ElectronReact在线资源和教程官方文档在线教程综合学习路径经典开发案例VisualStudioCodeHyperTuskNotableBeekeeperStudio开源项目和示例代码ElectronReactBoilerplateElectronForge+ReactElectronReactTemplate学习和实践使用El......
  • 数据列表“占位符”未随表单提交一起发送
    我有一个正在更新SQL数据库的Python应用程序。一种表单(使用Jinja)提供了一个数据列表输入,其中包含当前值(来自数据库)作为“占位符”<inputlist="item_cat"name="item_cat"placeholder="{{item_cat}}"/><datalistid="item_cat">{%forcat_nameincate......
  • ref和reactive分别编写的计数器
    使用ref函数和reactive函数写的技术器小程序,ref的实现用到了reactive,推荐使用ref,代码点击查看代码<script>//setup是组合是API的体现import{reactive,ref}from'vue'exportdefault{setup(){conststatus=reactive({count:0})......
  • 使用Java和Reactive Streams构建流式应用
    使用Java和ReactiveStreams构建流式应用大家好,我是微赚淘客系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!今天,我们将深入探讨如何使用Java和ReactiveStreams构建流式应用。流式应用能够高效处理异步数据流,尤其适合处理大量数据和实时数据的场景。ReactiveStreams是一个......
  • 可视化自定义表单开源的突出优势表现在哪里?
    随着数字化发展潮流的袭来,降本、增效、提质的办公效率得到了很多企业朋友的喜爱与支持。那么,该如何实现这一目标?又如何帮助企业降低开发成本、提升办公效率?想要了解这些详细信息,可以关注低代码技术平台、可视化自定义表单开源的相关信息。流辰信息也将持续做好自主研发创新,为行业......
  • 解决 Atlantic.dll 错误:电脑修复步骤与建议
    atlantic.dll不是一个标准的Windows系统文件,也不是广泛认可的软件组件,因此它的具体用途和来源可能比较难以确定。通常,atlantic.dll可能与特定的软件或游戏相关,尤其是一些较老的或特定地区的软件。这个DLL文件可能包含了用于处理网络通信、数据传输或其他特定功能的代码。当系......
  • 在 Django 表单中使用正确的 Bootstrap CSS 进行单选表单输入
    如何让Django表单将正确的Bootstrap渲染到Radioselect表单输入?我在表单中传递了form-controlform-checkclassess,但生成的表单HTML对于radioselect选项并不准确。我正在寻找渲染引导程序原色和内联单选按钮。表单classPersonForm(forms.Form......
  • React+TypeScript 组件库开发全攻略:集成Storybook可视化与Jest测试,一键发布至npm
    平时我除了业务需求,偶尔会投入到UI组件的开发中,大多数时候只会负责自己业务场景相关或者一小部分公共组件,极少有从创建项目、集成可视化、测试到发布的整个过程的操作,这篇文章就是记录组件开发全流程,UI组件在此仅作为调试用,重点在于集成项目环境。组件我们使用React+TypeScri......
  • bug处理--antdesign中umi升级后无法加载子页面
    bug处理--antdesign中umi升级后无法加载子页面historyconstAdmin:React.FC=(props)=>{ const{children}=props; return( <PageHeaderWrapper> {children} </PageHeaderWrapper> );};now升级到Umi4后,之前的一些组件不能用了,获取不到props,props......
  • 五类字体serif,sans-serif,monospace,cursive和fantasy
    引用:https://www.cnblogs.com/shangsi/articles/12212792.html 一.示例generic-font-familiesP.S.更多英文字体示例见参考资料-五种一般字体族英文示例P.S.更多中文字体示例见参考资料-TheCompleteBeginner’sGuidetoChineseFonts二.作用Genericfontfamilies......