当前位置: 首页 > news >正文

react antd Modal里Form设置值不起作用

问题描述:

react antd Modal里Form设置值不起作用,即使用form的api。比如:编辑时带出原有的值。

造成的原因:一般设置值都是在声明周期里设置,比如:componentDidMounted里设置,hook则在useEffetc里设置,因为Form在Modal里,会造成 form还没渲染完,就已经设置完值的情况 即在调用form的实例时,Modal内部的组件并未渲染,才导致了该错误。

为何在 Modal 中调用 form 控制台会报错?

 这是因为你在调用 form 方法时,Modal 还未初始化导致 form 没有关联任何 Form 组件。你可以通过给 Modal 设置 forceRender 将其预渲染

 表单 Form - Ant Design

解决问题:

知道了原因那解决起来当然就好解决了。

方案一、给 Modal 设置 forceRender 将其预渲染:

const [form] = Form.useForm();useEffect(() => {form.setFieldsValue({ ...xxx })}, [])< Modal forceRender><Form form={form}/></Modal >

需要注意的是,当 forceRendertrue 时,Modal 组件会在第一次渲染时就会渲染子组件,这可能会导致一些组件的生命周期函数提前执行,从而产生一些不符合预期的结果。因此,在使用 forceRender 属性时,需要特别注意 Modal 中子组件的生命周期函数的执行顺序和时机。 总的来说,forceRender 属性可以在 Modal 渲染时立即渲染子组件,从而提高用户体验,但是也可能会对性能造成一定的影响。在使用时需要根据具体情况进行权衡和选择。  

方案二、使用定时器(最不推荐的)

定时器这个存在一些坑,因为你无法确认 渲染dom需要多久。如果超过设置得时长,就会无法赋值成功。

const [form] = Form.useForm();const formRef = useRef(null);useEffect(() => {setTimeout(()=>{form.setFieldsValue({ ...xxx })},500)}, [])< Modal><Form form={form} form={form}/></Modal >

总结:

我个人更倾向于方式一。

如果你出现了 Warning: Instance created by useForm is not connected to any Form element. Forget to pass form prop?的警告 可以看:Warning: Instance created by useForm is not connected to any Form element. Forget to pass form prop_崽崽的谷雨的博客-CSDN博客

相关文章:

react antd Modal里Form设置值不起作用

问题描述&#xff1a; react antd Modal里Form设置值不起作用&#xff0c;即使用form的api。比如&#xff1a;编辑时带出原有的值。 造成的原因&#xff1a;一般设置值都是在声明周期里设置&#xff0c;比如&#xff1a;componentDidMounted里设置&#xff0c;hook则在useEff…...

idea连接Linux服务器

一、 介绍 配置idea的ssh会话和sftp可以实现对linux远程服务器的访问和文件上传下载&#xff0c;是替代Xshell的理想方式。这样我们就能在idea里面编写文件并轻松的将文件上传到linux服务器中。而且还能远程编辑linux服务器上的文件。掌握并熟练使用&#xff0c;能够大大提高我…...

在windows环境下使用winsw将jar包注册为服务(实现开机自启和配置日志输出模式)

前言 Windows系统使用java -jar m命令行运行Java项目会弹出黑窗。首先容易误点导致程序关闭&#xff0c;其次我们希望能在Windows系统做到开机自动启动。因此对于SpringBoot程序&#xff0c;目前主流的方法是采用winsw&#xff0c;简单容易配置 1.下载winsw工具 https://git…...

汽车通用款一键启动舒适进入拓展蓝牙4G网络手机控车系统

1.PKE无钥匙舒适进入功能,靠近车门自动开锁,离开车门自动上锁 2.一键启动/熄火 3.远程遥控启动/熄火 4.遥控设防盗/解除防盗 5.遥控开后尾箱锁负信号输出(需要原车自带尾箱马达和继电器&#xff09; 6.静音防盗/解除防盗 7.启动车后踩脚刹自动上锁 8.熄火车辆后自动开锁…...

QSettings Class

QSettings类 QSettings类公共类型&#xff08;枚举&#xff09;公有成员函数静态成员函数函数作用这个类写文件的特征 QSettings类 QSettings类提供持久的独立于平台的应用程序设置。 头文件:#include< QSettings >qmake:QT core继承&#xff08;父&#xff09;:QObje…...

【vue】关于vue中的插槽

当在Vue.js中构建可复用的组件时&#xff0c;有时候需要在父组件中传递内容给子组件。Vue的插槽&#xff08;slot&#xff09;机制提供了一种灵活的方式来实现这种组件间通信。 插槽允许你在父组件中编写子组件的内容&#xff0c;然后将其传递给子组件进行渲染。这样&#xff…...

Springboot整合Mybatis Plus【超详细】

文章目录 Mybatis Plus简介快速整合1&#xff0c;导入依赖2&#xff0c;yml文件中配置信息3&#xff0c;启动类上加上扫描mapper接口所在包的注解4&#xff0c;编写配置类5&#xff0c;实现自动注入通用字段接口&#xff08;非必需&#xff09;6&#xff0c;编写生成器工具类 使…...

接口测试-使用mock生产随机数据

在做接口测试的时候&#xff0c;有的接口需要进行大量的数据进行测试&#xff0c;还不能是重复的数据&#xff0c;这个时候就需要随机生产数据进行测试了。这里教导大家使用mock.js生成各种随机数据。 一、什么是mock.js mock.js是用于生成随*机数据&#xff0c;拦截 Ajax 请…...

Kohl‘s百货的EDI需求详解

Kohls是一家美国的连锁百货公司&#xff0c;成立于1962年&#xff0c;总部位于美国威斯康星州的门多西。该公司经营各种商品&#xff0c;包括服装、鞋子、家居用品、电子产品、化妆品等&#xff0c;并拥有超过1,100家门店&#xff0c;分布在美国各地。本文将为大家介绍Kohls的E…...

二叉树part6 | ● 654.最大二叉树 ● 617.合并二叉树 ● 700.二叉搜索树中的搜索 ● 98.验证二叉搜索树

文章目录 654.最大二叉树思路代码 617.合并二叉树思路代码 700.二叉搜索树中的搜索思路代码 98.验证二叉搜索树思路官方题解代码困难 今日收获 654.最大二叉树 思路 前序遍历构造二叉树。 找出数组中最大值&#xff0c;然后递归处理左右子数组。 时间复杂度On2 空间复杂度On …...

Linux命令记录

Shells 查看当前系统shell cat /etc/shells # 输出 # /etc/shells: valid login shells /bin/sh /bin/bash /usr/bin/bash /bin/rbash /usr/bin/rbash /bin/dash /usr/bin/dash查看正在使用的shell echo $SHELL # 输出 /bin/bashLinux文件结构 bin&#xff1a;系统可执行文件b…...

eBPF 入门实践教程十五:使用 USDT 捕获用户态 Java GC 事件耗时

eBPF (扩展的伯克利数据包过滤器) 是一项强大的网络和性能分析工具&#xff0c;被广泛应用在 Linux 内核上。eBPF 使得开发者能够动态地加载、更新和运行用户定义的代码&#xff0c;而无需重启内核或更改内核源代码。这个特性使得 eBPF 能够提供极高的灵活性和性能&#xff0c;…...

Linux :: vim 编辑器的初次体验:三种 vim 常用模式 及 使用:打开编辑、退出保存关闭vim

前言&#xff1a;本篇是 Linux 基本操作篇章的内容&#xff01; 笔者使用的环境是基于腾讯云服务器&#xff1a;CentOS 7.6 64bit。 学习集&#xff1a; C 入门到入土&#xff01;&#xff01;&#xff01;学习合集Linux 从命令到网络再到内核&#xff01;学习合集 目录索引&am…...

Linux内核进程创建流程

本文代码基于Linux5.10 内容主要参考《Linux内核深度解析》余华兵 当Linux内核要创建一个新进程时&#xff0c; 流程大致如下 ret fork(); if (ret 0) {/* 子进程装载程序 */ret execve(filename, argv, envp); } else if (ret > 0) {/* 父进程 */ } 大致可以分为创建新…...

【03.04】大数据教程--HTTP协议和静态Web服务器

HTTP协议和静态Web服务器 HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是一种用于传输超文本的协议&#xff0c;它是Web上的基础通信协议。静态Web服务器是指能够提供静态内容&#xff08;如HTML、CSS、JavaScript和图像文件&#xff09;的服务器。 在本教程中&am…...

数据共享传输:台式机和笔记本同步文件!

为什么要在台式机和笔记本同步文件&#xff1f; “我想在台式机和笔记本同步文件。因为我工作时使用笔记本&#xff0c;在家里使用安装了Windows 10系统的台式机&#xff0c;我想要在笔记本和台式机之间同步应用程序、游戏、文档等。有没有一种可以在台式机和笔记本同步文件的…...

java设计模式(十二)代理模式

目录 定义模式结构角色职责代码实现静态代理动态代理jdk动态代理cglib代理 适用场景优缺点 定义 代理模式给某一个对象提供一个代理对象&#xff0c;并由代理对象控制对原对象的引用。说简单点&#xff0c;代理模式就是设置一个中间代理来控制访问原目标对象&#xff0c;以达到…...

Umi微前端水印踩坑以及解决方案

最近公司需要在管理后台加一个水印方案~ 项目用的umi方案,以为就是改一个配置的问题,后来发现坑点还蛮多~ 希望此稳定能帮助到用umi 的你们. 一. 先来说说心路历程 坑点1 umi的水印适配只能在layout中进行配置,也就是路由配置中layout为false的页面无法配置水印,比如说登录页…...

Android RK3588-12 hdmi-in Camera方式支持NV24格式

hdmi-in Camera方式支持NV24格式 modified: hardware/interfaces/camera/device/3.4/default/ExternalCameraDevice.cpp modified: hardware/interfaces/camera/device/3.4/default/ExternalCameraDeviceSession.cpp diff --git a/hardware/interfaces/camera/device/3.4…...

Hive窗口函数详细介绍

文章目录 Hive窗口函数概述样本数据表结构表数据 窗口函数窗口聚合函数count()SQL演示 sum()SQL演示 avg()SQL演示 min()SQL演示 max()SQL演示 窗口分析函数first_value() 取开窗第一个值应用场景SQL演示 last_value()取开窗最后一个值应用场景SQL演示 lag(col, n, default_val…...

TinyUPnP:嵌入式设备轻量级UPnP端口映射实现

1. TinyUPnP&#xff1a;面向嵌入式平台的轻量级UPnP IGD客户端实现 TinyUPnP 是一个专为资源受限嵌入式系统设计的极简 UPnP&#xff08;Universal Plug and Play&#xff09;Internet Gateway Device&#xff08;IGD&#xff09;客户端库&#xff0c;核心目标是 在无用户干预…...

VS Code 通义灵码:从安装到实战编码的全方位指南

1. 通义灵码&#xff1a;你的AI编程助手 第一次听说通义灵码时&#xff0c;我正在为一个Python项目焦头烂额。那是一个需要处理大量数据清洗的脚本&#xff0c;我写了半天还是觉得效率太低。同事随口说了句"试试通义灵码吧"&#xff0c;没想到这个决定让我少加了三天…...

HTML基础教程入门保姆级教学

什么是HTMLHTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言&#xff0c;是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言 HTML 只有核心作用&#xff1a;搭建网页的结构和内容…...

新手福音:在快马用ai生成你的第一个notepad编程入门项目

作为一个刚接触编程的新手&#xff0c;我完全理解那种面对空白编辑器时的迷茫感。还记得第一次想用Notepad写代码时&#xff0c;光是下载安装就折腾了半天。今天分享一个超实用的方法&#xff0c;用InsCode(快马)平台就能一键生成完整的入门指南&#xff0c;把下载、安装、写第…...

ImageGlass:轻量级全能图像查看器的效率革命

ImageGlass&#xff1a;轻量级全能图像查看器的效率革命 【免费下载链接】ImageGlass &#x1f3de; A lightweight, versatile image viewer 项目地址: https://gitcode.com/gh_mirrors/im/ImageGlass 价值定位&#xff1a;重新定义图像浏览体验 在数字内容爆炸的时代…...

GTE-Base-ZH模型服务监控与运维:使用Prometheus和Grafana

GTE-Base-ZH模型服务监控与运维&#xff1a;使用Prometheus和Grafana 当你把GTE-Base-ZH模型部署上线&#xff0c;开始对外提供服务后&#xff0c;心里是不是总有点不踏实&#xff1f;服务现在运行得怎么样&#xff1f;有没有人用&#xff1f;响应快不快&#xff1f;服务器资源…...

错误处理与HTTP状态码:Zalando RESTful API Guidelines 的异常管理机制

错误处理与HTTP状态码&#xff1a;Zalando RESTful API Guidelines 的异常管理机制 【免费下载链接】restful-api-guidelines A model set of guidelines for RESTful APIs and Events, created by Zalando 项目地址: https://gitcode.com/gh_mirrors/re/restful-api-guideli…...

J1712-粒状巧克力糖包装机设计【颗粒状糖果包装机设计】【三维SW模型+6张CAD图纸+说明】

J1712-粒状巧克力糖包装机设计【颗粒状糖果包装机设计】【三维SW模型6张CAD图纸说明】 传送带电机刚启动那会儿&#xff0c;总有几个巧克力豆卡在导流槽边缘。凌晨三点的实验室里&#xff0c;我盯着SolidWorks里旋转的螺旋送料机构模型&#xff0c;突然意识到——这玩意儿得做成…...

阿里内部强推性能优化全栈小册,Java程序员必备!

性能优化可以说是我们程序员的必修课&#xff0c;如果你想要跳出CRUD的苦海&#xff0c;成为一个更“高级”的程序员的话&#xff0c;性能优化这一关你是无论无何都要去面对的。为了提升系统性能&#xff0c;开发人员可以从系统的各个角度和层次对系统进行优化。除了最常见的代…...

终极小说下载器:一键保存全网小说,打造你的私人数字图书馆

终极小说下载器&#xff1a;一键保存全网小说&#xff0c;打造你的私人数字图书馆 【免费下载链接】novel-downloader 一个可扩展的通用型小说下载器。 项目地址: https://gitcode.com/gh_mirrors/no/novel-downloader 你是否遇到过这样的情况&#xff1a;追更的小说突然…...