antd modal组件多次渲染的临时解决办法

原创 已于 2022-06-08 08:32:14 修改 · 2.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #react.js #前端

于 2022-06-07 17:49:24 首次发布
本文讲述了在React应用中，使用Ant Design的Modal和Form组件时遇到的相同ID警告问题。作者通过检查源代码发现由于重复渲染导致多个元素拥有相同的id。为解决这个问题，尝试了关闭Antd的CSS动画无效，然后采用nanoid库为每个Form.Item生成唯一id，成功消除了控制台警告。但这种方法仅是权宜之计，未能解决根本的重复渲染问题。

文章目录

1 问题说明

将Modal和Form结合使用，实现点击页面某个按钮，弹出一个模态框，模态框里展示form表单数据。在使用的过程中，发现: 如果刷新页面后首次点击弹出模态框，控制台总是显示warning，说我有5个相同id的元素，warning如下
在这里插入图片描述

但是我仔细检查代码 并未发现有相同id的元素，于是将浏览器上的源代码粘贴下来看看

我在vscode里检索下 如下图 确实 id='roleId'的有5处 再仔细看下网页内容 发现是重复渲染了
在这里插入图片描述

2 解决办法

2.1 关闭css动画

参考antd官网说明 antd去除css动画

于是我试着在Modal组件是加上这两个属性 不过 还是同样的报错 没生效

在这里插入图片描述
antd官方说不保证下个大版本还可用 可能是到这个版本用不了了吧 我看API里也没有

我的react是18.1.0 antd是4.2

最低0.47元/天 解锁文章
基于react和antd二次封装公共搜索组件
m0_61607678的博客
09-20 1737
你是否曾经在使用 React 和 Ant Design 构建前端应用时，发现自己反复编写相似的组件代码？是否曾感到组件的维护和定制变得繁琐？如果是的话，你并不孤单，因为这是前端开发中常见的问题之一。在本篇技术分享博客中，我们将探讨如何通过二次封装 Ant Design 组件来提高 React 应用的开发效率和可维护性。我们将分享实用的技巧和最佳实践，帮助你更好地理解组件封装的重要性，以及如何精确地进行二次封装，使你的项目变得更加高效、灵活和易于维护。
关于实现在阿里的Antd的Modal上实现动态表的一种思路
热门推荐
nianhua120的专栏
08-02 1万+
关于实现在阿里的Antd的Modal上实现动态表的一种思路问题描述有一种业务场景，就是我们需要在一个Modal中实现动态添加表单项。并且在该Modal期间会触发状态树的更改，比如你在Modal上填写了一堆数据 然后点击提交按钮，数据被提交到后台，可是后台发现数据不满足需求，返回了错误信息。此时你希望Modal仍然能显示出来，并且包含已经填写过 的信息。但是当用户点击新建按钮时候，你又希望这个
【AntDesign】Modal对话框内子组件重复渲染的问题
每天进步一点点, 靠近小目标一点点~
07-27 909
Modal关闭时未对子元素进行销毁, Modal增加destroyOnClose={true}
【React】React组件渲染两次
weixin_44284276的博客
09-19 873
StrictMode 是一个用来检查项目中潜在问题的工具。StrictMode 不会渲染任何可见的 UI，它为其后代元素触发额外的检查和警告。在使用antv图库时发现图表会渲染两次，原因是React的严格模式导致的。在index.js中去掉标签即可。这仅适用于开发模式。生产模式下生命周期不会被调用两次。
Ant-Design组件中，在Modal 中加入Table组件，为什么Modal 关闭时 ，Table中数据不会更新重新渲染？有什么方法可以让表格中的数据重新渲染？
yqdid的博客
07-24 1870
在Ant Design的Modal组件中，关闭Modal时，Table组件中的数据不会重新渲染的原因是，Modal组件默认是通过隐藏和显示来实现显示和关闭的，而不是通过销毁和重新渲染组件。以上方法中，可以根据具体情况选择适合的方法来让表格中的数据重新渲染。
antd modal 打开会闪一下，针对确实多次渲染的问题
赵乘风_i
04-12 5995
需求背景 在最近的项目中，遇到一个比较复杂的场景，点击触发后会打开modal弹框，但是因为情况比较多，总共有3种方式都可以打开modal框，所以在父组件的处理就比较复杂，涉及到了多次渲染，就导致modal框在打开的时候，会闪一下。 我也知道，处理好多次渲染的问题，modal框应该在打开的时候就不会闪了，但是，因为需求场景比较复杂，如果要处理多次渲染，那就会导致modal框打开后的各种问题，所以不能修改 解决 在仔细看了官网的api后，发现一个属性， maskTransitionName 其实就是将Modal
Antd-Vue表格中弹出多层Modal 问题解决-小记
m0_54731428的博客
06-12 1842
简单记录下vue前端开发中遇到的一个小问题，不值得在这问题上花费过多时间，谨记
antd中的modal组件去电取消和ok按钮
最新发布
07-29
另外，根据引用[3]提到的问题，我们需要注意Modal组件的使用可能会带来一些副作用（如多次渲染），但这个问题与去除按钮无关，所以不在本回答中展开。 下面我们按照要求生成相关问题。</think>### 如何在antd ...
基于antd pro二次封装的组件库react-antd-super-form
szsk2021的博客
03-10 1692
基于antd pro二次封装的组件库react-antd-super-form 该组件库是我们对antd pro进行二次封装的一个偏业务层面的一个React ui组件库。 该组件库诞生的初衷？ 该组件库主要是为了提升中后台管理系统开发效率，将antd封装好的各个组件进行组合以达到页面高度配置化。 后台管理系统需求接触多了之后我们会发现各个模块间的区别其实并不大，无非就是表格、表单、弹窗这些组件里面嵌套各个粒度更小的组件。 所以我们就考虑一般组件封装都是将大的组件拆分成粒度更小的组件，那为什么
antd Modal弹窗中表单 resetFields时，控件重复渲染。
czq_2020的博客
06-06 325
如果是自定义组件，自定义组件会重新渲染，useEffect会重新执行。使用弹窗完全关闭后再resetFields。子组件就不会重新渲染了。
React-Native 组件之 Modal的使用详解
08-29
本篇文章主要介绍了React-Native 组件之 Modal的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React】解决react执行两遍的问题
weixin_43988116的博客
05-05 724
有一项检测意外的副作用，严格模式不能自动检测到你的副作用，但它可以帮助你发现它们，使它们更具确定性。通过故意重复调用以下函数来实现的该操作。在react渲染组件中 ， 初始化的index.tsx文件里，存在一个标签，这个是react的一个用来突出显示应用程序中潜在问题的工具（严格模式）注意：这仅适用于开发模式。生产模式下生命周期不会被调用两次。所以只需要把这个标签去掉就可以了。
vue antd气泡卡片 在循环中 点击只展示一个（循环展示了多个气泡卡片）
queen_css的博客
12-09 1931
<a-table :columns="columns" :data-source="data"> <a slot="name" slot-scope="text,record">{{ text }}</a> <span slot="action" slot-scope="text, record,index"> <!-- 气泡卡片 --> <a-popover v-if="previewIndex==i..
Antd Tabs标签页动态加载子组件，会多次渲染的问题
u013790941的博客
12-10 5438
开始我是这样做的 <Tabs hideAdd onChange={this.onChange} activeKey={activeKey} type="editable-card" onEdit={this.onEdit} style={{width: "100%"}} > {TabsTitles.map(pane => ( <TabPane tab={pane.title} key={pane.key}>
2020/10/09 react 函数式组件解决 antd tabs 重复渲染
Nighsloth的博客
10-09 1632
问题效果 之前的代码 解决方法 使用 条件渲染 实现每次切换刷新页面 修改后的代码 import React, { useState } from 'react'; -- const [activeKey, setactiveKey] = useState("1") let onChange = (key) => { setactiveKey(key) } -- <div className="my-ads"> <Tabs de..
vue修改数据后，页面不重新进行渲染的问题（当点击其他页面元素会重新渲染数据）
jxysgzs的博客
06-22 3822
问题 最近开发项目时，遇到一个非常特殊的问题（以前也遇到过但都用很多乱七八糟的方式解决了！），这个问题就是当我在methods的某一个方法中修改了页面v-for的数据时，本应该重新渲染的页面没有响应，还是维持老样子，当我点击页面上的其他组件时，页面才重新渲染出来。 给大家看一下就是下面这个效果。 下面这两个，是点击其他组件时又成功渲染出来的样子。 原因 这里说一个概念，在组件初始化的时候，对data中的某一个数组进行递归遍历，会对数组中数据的每一个属性进行劫持，添加set,get方法。我们后来.
React/RN组件避免重复渲染的一些技巧
Mamong's blog
03-13 2156
这里我们只讨论Component和函数组件。我们知道Component是否发生重渲染是由shouldComponentUpdate决定的，默认情况下返true。自定义的Component会根据自身state和props是否发生变化，来决定自身是否需要重新渲染，这个过程往往需要进行深度比较的。而相对应的，PureComponent会通过shadowEqual对state和props进行浅比较，来决定是否需要重新渲染。一般而言，如果state和props没有发生变化，组件本身是不需要重新渲染的。
blur事件连续触发解决办法
June的专栏
06-18 5966
项目背景：修改程序bug；高度和宽度输入框，进行长度校验，长度不符合进警告提示 blur事件方法里不能含有提示信息，否则高度输入完之后，直接输入宽度，会出现多个提示框； 对于这种情景，blur事件改为change事件，触发是建立在输入框中的文字产生变化，并且焦点从该输入框离开的时候才触发 解决办法：改为change事件 ...
react使用antd-design动态渲染组件，封装通用modal弹出form表单组件、table组件(传数据出页面)
刘毅鹏的博客
07-31 9391
react使用antd-design封装通用modal弹出form表单组件、table组件并附带1.upload上传图片转base64、2.批量插入excel表格数据 页面展示效果 第一步项目中创建CommonForm.js文件对antd-design中Form组件封装 import { Image, Form, Input, Button, Radio, Select, TimePicker, Checkbox, Upload, message } from "antd"; import Re
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值