antd message设置无效（未正常弹出）踩坑记录

最新推荐文章于 2024-03-27 09:29:30 发布
最新推荐文章于 2024-03-27 09:29:30 发布
阅读量6.5k 收藏
点赞数 1
分类专栏： react + ant-design 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44197210/article/details/120434144
版权

环境：react 的一个function component中
在数据提交成功后想给一个提示，结果提示为成功；结果发现提示未弹出来，后排查时代码确实是到了message.success(‘暂存成功！’)。

原因：是因为setGuideId是一个useState 导致这个function components又重新render了，render的时候把messasge的dom直接干掉了？我现在也不太确定，但确实是不去改变state的话就能成功弹出？
在这里插入图片描述解决前
解决方案：把setGuideId晚一些执行。果然可以了！
在这里插入图片描述

想为雷总打工的小张
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在antd Form表单中select设置初始值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <Form.Item label=作用对象> {getFieldDecorator('targetId', { initialValue: this.state.targetId }, { rules: [{ required: false, message: '作用对象' }] })( <Select placeholder=请选择作用对象> {targetList.map(entity => <Option key={enti
antdmessage使用_Antd message 这种组件为什么不需要在Render中使用，只需要在方法中调用...
weixin_34520360的博客
12-23 547
一般的引用antd中的组件我们需要import {Button} from ‘antd’class App extends React.Component{render(){return()}}如上代码所示，需要把import的组件放在我们的render中去渲染，import {message，Button} from ‘antd’class App extends React.Component...
antd vue的message弹框组件无法显示
最新发布
jiangchenW的博客
03-27 363
getContainer 属性用于配置渲染节点的输出位置，而默认值就是body元素，所以使用全局配置，将渲染节点输出到项目节点中，就可以成功显示message组件了。message组件并非没有渲染，而是被插入到了body下，和 id为app的项目元素并列为兄弟元素了，所以无法看到组件的提示效果。近日在使用antdesignvue进行项目开发，在需要使用message组件时，在对应的页面进行了引用，但是。
Vue弹出菜单功能的实现代码
01-19
言归正传 我们老样子直接先上效果图再开始今天的分享 这个项目的github可以看一看 组件分析 界面组成 逻辑分析 最终实现 界面组成 从上图中，我们可以看出界面主要分为menu和item2块，其中menu的动画是自传，item的动画是位移，然后这里我们通过绝对布局的方式将整个控件定位在四个角落 .menu_container { position: absolute; z-index: 100; border-radius: 50%; transition-duration: 400ms; text-align: center; border: #ef
antd-DatePicker组件获取时间值,及相关设置方式
01-21
DatePicker组件默认语言是英语，需要设置为中文的话，需要安装moment。 import moment from “moment”; import “moment/locale/zh-cn” format属性，设置日期的格式，如“2020-02-28”。 设置日期 选择日期是今天之前【包含今天】 需要和moment搭配应用 // 设置默认的起始日期 const disabledDate = (current) => { console.log(current) return current > moment().startOf('day');
react使用antd消息报错You are calling notice in render which will break in React 18 concurrent mode.
08-22 3311
不使用useMessage，直接使用 静态方法message.info：github问题地址：
react - antd中message提示配置无效问题
前端三脚猫的博客
09-20 3984
在react中使用antd组件的message全局提示时, 配置无效问题。
【Python百日进阶-Web开发-Feffery】Day390 - fac反馈05：AntdNotification通知提醒框
岳涛的博客
06-11 2134
文章目录前言：fac是什么？“人生苦短，我用Python；Web开发，首选Feffery！”↓↓↓ 今日笔记 ↓↓↓五、fac反馈：AntdNotification通知提醒框5.1 语法与参数5.1.1 语法5.1.2 主要参数说明5.2 使用示例5.2.1 基础使用5.2.2 不同的状态5.2.3 不同的弹出位置5.2.4 持续显示时长的设置 前言：fac是什么？ feffery-antd-components（简称fac），是国内大佬费弗里(Feffery)老师基于著名的React UI组件库ant
ant组件库 message组件只响应了一次就失效了
weixin_39818813的博客
09-30 1191
但是只在第一个接口失败的时候触发了，第二个接口失败没有响应提示信息，后续的其它的提示error，info，warning，success都失效了。是一个对象，导致出错阻塞了后面message的触发。奇怪的是控制台并没有显示错误信息。，所以这个坑很容易被忽略掉。页面有3个接口请求，每次请求失败都会。中的err全部转成字符串的格式。排查代码，发现第二次使用。
AntdesignVue 局部全屏后Message、Select 、Modal、Date等组件不显示问题解决方案（最终版）
朝花夕拾的博客
04-25 4118
1、对this.$message.....这种的消息提示组件解决方案如下1、对this.$message.....这种的消息提示组件解决方案如下在main.js中全局配置消息提示测试可以在父组件DIV全屏后可以弹出提示。
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
required: true, message: '请输入用户名', }], })( <Input placeholder='\u8bf7\u8f93\u5165\u7528\u6237\u540d'/> ) } </Form.Item> 正确代码： <Form.Item> { getFieldDecorator('use
create-react-app-antd, 在没有弹出的情况下使用antd创建 React App.zip
09-17
create-react-app-antd, 在没有弹出的情况下使用antd创建 React App 在create-react-app中使用 antd一步一步的文档https://ant.design/docs/react/use-with-create-react-app中文：https://ant.design/docs/re
ReactDOM卸载组件时报VM164 react_devtools_backend.js:2450 Warning: You are calling ReactDOM.unmountComponen
qq_44015417的博客
05-14 984
有哪位小伙伴知道报这个错是因为版本问题吗，解决了好久还没解决掉，只能来求助各位小伙伴了 //卸载组件的回调 function unmount(){ ReactDOM.unmountComponentAtNode(document.getElementById('root')) } return ( <div> <h1>求和为:{count}</h1> <button onClick={a
react18报错
钱辉
10-18 714
react18报错
vue3+ant design 4.x版本遇见message不显示问题。
m0_64591071的博客
02-19 325
最后如果都没有问题，删了node_modules库重新下载一下。自己打断点到success，但是就是没有全局显示。// 使用链式调用来添加插件和挂载应用程序。第二：自己显示文件是否引入。//创建axios引用。
antd 弹窗使用问题
program_ape_lqh的博客
11-17 625
并且在用的时候得加let that = this;不然在onOk()里面用不到this。直接在调用的方法里用antd的modal.confirm的组件。今天做项目有个需求，需要确认弹窗。
antd实现双击一条信息弹出Card组件以及信息
05-30
可以通过在antd的List组件的item上添加onDoubleClick事件来实现双击弹出Card组件，具体实现代码如下： ```jsx import { List, Card } from 'antd'; import React, { useState } from 'react'; const data = [ { title: '信息1', content: '信息1的详细内容', }, { title: '信息2', content: '信息2的详细内容', }, { title: '信息3', content: '信息3的详细内容', }, ]; const DoubleClickList = () => { const [visible, setVisible] = useState(false); const [title, setTitle] = useState(''); const [content, setContent] = useState(''); const handleDoubleClick = (item) => { setTitle(item.title); setContent(item.content); setVisible(true); }; const handleCancel = () => { setVisible(false); }; return ( <> <List dataSource={data} renderItem={(item) => ( <List.Item onDoubleClick={() => handleDoubleClick(item)}> <List.Item.Meta title={item.title} /> </List.Item> )} /> <Modal visible={visible} onCancel={handleCancel}> <Card title={title}> <p>{content}</p> </Card> </Modal> </> ); }; export default DoubleClickList; ``` 在这里，我们实现了一个名为DoubleClickList的组件，它包装了antd的List组件，并添加了双击事件。当用户双击某个item时，会弹出一个Modal组件，其中包含了Card组件，显示了该item的title和content。用户可以在Modal中查看该item的详细内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值