Ant Design of React Modal显示数据错乱问题

最新推荐文章于 2023-03-30 12:06:50 发布
最新推荐文章于 2023-03-30 12:06:50 发布
阅读量3.4k 收藏
点赞数
文章标签： Ant React Modal 显示错误
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbkc5/article/details/70157593
版权

需求 写一个Modal，来展示或者录入用户的数据。

问题 当修改一个用户的Modal后，再打开另一个用户的Modal，后一个用户显示的数据为前一个用户的数据，造成数据错乱的问题。

这是在Ant Design官网上找到的答案


点击打开链接

我按照提示，给Modal设置一个新的key后，解决问题。但是第一种解决方法，自行手动清空旧的状态不知该怎么操作。

hbkc5
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
vue3使用ant-design-vue的Modal的小技巧
Yosola的博客
04-26 5392
ant的modal挂载，移动
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
qq_56392291的博客
03-18 1927
解决表单initialValue值不动态更新
react 使用antd（4.x） Modal关闭弹框清空数据问题
fankeweiii的博客
03-30 3340
react 使用antd Modal关闭弹框清空数据问题
antd modal层级混乱
lyn1772671980的博客
12-30 4392
【问题描述】有新增菜单、编辑菜单、图标选择三个modal框，其中，图标选择modal框是在新增菜单 和编辑菜单 modal框上点击菜单选择框后弹出的公用的moda，点击几次后，图标 modal层级混乱，具体入下图 【问题分析】 菜单图标modal只创建一次，多次打开后，层级为第一次创建时的zIndex,导致层级没在最上层 【解决方案】给modal加上一个key,每次打开菜单图标modal,都指定新的key=Math.random(),层级重新渲染 ...
react+antd 莫名缓存与多个对话框的层级错乱
weixin_41564440的博客
06-15 2235
问题1: 新增和查看修改公用一个modal,点击新增时,已经将state中的一个对象清空,但是新增的页面还是有缓存数据; 处理方法: 在modal前加个判断: 问题2: 在弹出的modal对话框中,点击预览图片按钮,再次弹出modal对话框预览图片,预览图片的对话框层级错乱,显示在了第一个modal详情信息的下面; 处理方法: 在modal前加个判断: 具体代码: import React, { Component } from 'react'; import { Button, Col
详解Ant Design of React的安装和使用方法
12-09
Ant Design of React提供了丰富的UI组件，如Button、Input、Table、Modal等，这些组件遵循一致的设计原则和交互规范，可以快速构建出高质量的中台应用界面。同时，Ant Design还支持主题定制，可以根据项目需求调整...
基于React和Ant Design的数据大屏展示设计源码
最新发布
04-03
本设计源码提供了一个基于React和Ant Design的数据大屏展示系统。项目包含27个文件，主要使用JavaScript、CSS和HTML编程语言。文件类型包括7个JavaScript文件、7个Map文件、6个CSS样式文件、2个PNG图片文件、1个ICO...
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react-dom@16.8.0或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' ...
Ant Design for React的DatePicker日期组件设置默认显示中文的方法
07-23
Ant Design for React 的 DatePicker 日期组件设置默认显示中文的方法 在 Ant Design for React 的 DatePicker 日期组件中，默认情况下显示英文，但是在某些情况下，我们需要将其设置为中文。今天，我们将学习如何...
antd Modal嵌套Form打开还是上一次的数据
前端劝退工程师
09-01 1万+
需求背景: 后台管理系统的一个弹窗同时承接新增和编辑功能（编辑时表单数据回填） 不要给Form 加 initialValues 因为 和 Form 一起配合使用时，设置 destroyOnClose 也不会在 Modal 关闭时销毁表单字段数据 解决如下： React.useEffect(() => { if (!updateItem) { form.resetFields(); } else { form.setFieldsValue(updateItem)
【Bootstrap】模态框（Modal）传值踩坑记录
微雨停了的博客
04-26 3560
文章目录一、模态框介绍二、实现效果三、实现代码—整个table部分+js四、分析4.1 html-button传值4.2 javascript-接值并传值4.3 input-接值五、Reference 一、模态框介绍 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 为了实现父窗体与其的交互，通常需要向其传值，实现带参数的传递，查看数据的唯一性。例如下面窗体：点击任意一个模态框（"回复"按钮）,如果不做任
ant-design-vue中实现modal模态框的复用（添加，编辑展示同一个模态框）
u012732909的博客
02-26 2235
用两个button（添加，编辑）按钮展示同一个模态框，并不是什么大问题，问题在于解决这两个模态框得有自己的确定和取消方法 父页面完全接管子页面（利于子页面复用） 父页面代码： <template> <div> 　　<-- 定义两个按钮，一个添加按钮， 一个编辑按钮 --> <a-button type="primary" @click="showModal">添加</a-button> <a-button ty
【bug】弹窗列表，每次打开数据回显的选中项不对，已解决
花椒和蕊的博客
01-18 232
【bug】弹窗列表，每次打开数据回显的选中项不对，已解决
antd分页器的bug以及解决方案
NinthMonee的博客
02-28 3911
一、背景 ​ 最近公司安排我去审查公司组件库，我们公司的组件库是基于antd 3.x做的二次封装。我在审查同事开发的分页器的时候，发现了几个bug。经过排查后发现，这个bug是因为antd引用第三方组件rc-pagination就有的bug，因此，我在github还给antd提了两个issue，一个被确认标记为了bug，另一个被关闭了，其实本质这两个issue的是一样的bug。值得一提的，在antd4.x和3.x都存在这个bug。 二、bug复现 这个bug主要是分页器快速跳页与正常直接选取页码跳转之间的
一--返回问题-层级关系-引入antd
weixin_43622452的博客
03-15 371
第一天 1-返回问题 在app.vue里设置,哪里需要在哪里设置 methods: { fanhui() { window.history.back(); } } 2-层级关系 ①app.vue是一级 ②在layout文件main_.vue二级(设置全局头部和侧边) ③内容为三级 在index.js const router = new Router({ ...
Ant Design，在一个页面中使用多个Modal（模态对话框）时，遮罩层颜色变深的不完美解决方案
热门推荐
码飞_CC的博客
08-01 2万+
  项目中使用Ant Design，有一个页面中需要多个模态对话框，发现同一个页面使用多个Modal的话会导致遮罩层颜色变深。目前本人还未找到解决问题根源的方法，只是投机取巧地使用了一种暂时的解决方案：就是给Modal添加属性maskStyle，然后调好对应的透明度，如：maskStyle={{backgroundColor:'rgba(0,0,0,.45)'}}   欢迎碰到同样问题的小伙伴们...
antd-mobile 多层modal弹框导致mask层显示异常
qq_38427709的博客
12-13 2727
最近用antd-mobile2.30，因为需求需要输入大量信息，因此用到了多层弹窗，然后发现在安卓中多层弹窗正常，但是在ios弹窗中的Modal.alert弹框的mask层无法正常显示 因此看了下它的css属性发现，wrap层存在z-index, translateZ两个属性在两个系统中渲染顺序的问题 .am-modal-wrp { z-index: 999; transform: translateZ(0.2667rem); } z-index在安卓中等级较高，而translateZ在ios中等级较
Antd模态框Modal内部组件数据回显
cake_eat的博客
06-05 1507
<Modal title="修改菜单" visible={isShowEdit} onCancel={()=>{ this.setState({isShowEdit:false}) }} footer={null} > <EditForm menu={menu} handleCancel={()=>{ this.setState({isShowEdit:false}) }}
react antdesign 怎么让Modal 出现滚动条
06-01
要让Modal出现滚动条，可以在Modal组件的样式中设置overflow属性为auto或scroll。具体实现方式如下： 1. 在你的组件中引入Modal组件，并设置visible属性为true。 2. 在Modal组件中添加style属性，将其设置为一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值