富文本BraftEditor引起的bug

 1、BraftEditor踩坑1

#基于之前写的一篇BraftEditor的使用#

        1. 问题起源:

 打开编辑弹窗--> 下面页面所示--> 当进行分类选择时候,就会报错,并且这个报错还不是一直都有,6次选择出现一次报错吧 

        2. 解决:

        2.1  起初以为是分类选择导致的报错,经过排查,不是

        2.2   仔细看了报错的信息,其中说The avove error occurred in the <BraftEditor> component: 通过这个定位到是富文本引起的错误,也就是“公告内容”这块用了富文本。

        2.3 xxx 'filter' of underfined, 点击 createBaseForm.js这个文件,发现它是node_modules包里的文件。但是引入的BraftEditor也没有引入这个文件呀,BraftEditor与这个createBaseForm.js不相关呀。

        2.4 从报错的控制台点击进入这个createBaseForm.js文件,直接定位到了图5所示,于是打断点看,第一次操作分类选项时,进入了断点,filter前面是有值的,于是点击好多次后,就有一次进入断点是图6 所示xxx 'filter' of underfined。对比两次断点的内容发现rules了。大胆想法,是不是rules影响的。因为form表单中required: true,于是把这个注释掉,发现不报错了~~~~~~~

       

                                                                图1

                                                                      图2

                                                              图5

                                                                图6

                                                                图3

                                                                   图4

 2、BraftEditor踩坑2

出现这样的报错时

意思为: 超过最大更新深度,当组件在componentWillUpdate或componentDidUpdate中重复调用setState以限制嵌套更新的数量以防止无线循环时,可能会发生这种情况......栈溢出......

问题:使用富文本时,initialValue: BraftEditor.createEditorState(pubContent)导致的

第一次进行回显时,值写在initialValue身上,由于后端返回的时字符串,回显到富文本里,需要把字符串处理或转译下再回显到富文本框里。

不能把富文本处理过程直接写在initialValue上,犹如下面代码这种写法,会导致render渲染一次,富文本处理一次,重复处理,栈溢出。initialValue上写处理后的结果,处理的过程可以写在conponentDidMount生命周期里,一进页面就处理好,处理的结果存在state里,initialValue上拿到state里存的结果。

<FormItem {...formItemLayout} label='公告内容'>{getFieldDecorator('a', {initialValue: BraftEditor.createEditorState(pubContent)})(<BraftEditorclassName={styles.editorStyle}placeholder='请输入公告内容!'onChange={e => this.changeEditor(e)}excludeControls={['emoji', 'media']}style={{background: '#fff',border: '1px solid #eee'height: '360px',}}/>)}</FormItem>

改进:

class Project extends Component {
construnctor(props){this.state = {editorState: BraftEditor.createEditorState(null),}
}componentDidMount () {this.dealEditor()
}
dealEditor = () => {const { pubContent } = this.props;this.setState({ // 一进页面就拿到后端返回的值,处理后存到state里editorState: pubContent ? BraftEditor.createEditorState(pubContent) : null,})
}...const { editorState } = this.state;
<FormItem {...formItemLayout} label='公告内容'>{getFieldDecorator('a', {initialValue: editorState, // 直接从state里拿处理后的结果,这样render渲染时,对富文本框的内容只会处理一次})(<BraftEditorclassName={styles.editorStyle}placeholder='请输入公告内容!'onChange={e => this.changeEditor(e)}excludeControls={['emoji', 'media']}style={{background: '#fff',border: '1px solid #eee'height: '360px',}}/>)}</FormItem>}export default Project

 相关文章

好用的React富文本编辑器(Braft Editor)及取色器、表格的应用

http://t.csdnimg.cn/88VLO

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/610032.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CES 2024:LG专注于新产品的人工智能变革

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

蓝牙模块在电动汽车充电设施中的创新应用

随着电动汽车的普及&#xff0c;充电设施的便捷性和智能化成为关键的发展方向。蓝牙技术作为一种无线通信技术&#xff0c;在电动汽车充电设施中发挥着越来越重要的作用。本文将深入探讨蓝牙模块在电动汽车充电设施中的创新应用&#xff0c;以提高充电体验、提升管理效率&#…

vue3.2引用unplugin-auto-import插入,解放开发中import组件

目录 前言引用unplugin-auto-import插件的优缺点优点缺点 unplugin-auto-import插件引入安装插件配置vite配置更新TypeScript配置使用代码位置 总结 前言 是否添加unplugin-auto-import取决于项目需求和团队习惯。如果项目中频繁使用Vue相关API&#xff0c;并且团队成员都熟悉这…

MulticoreWare与Imagination一同按下汽车计算工作负载的“加速键”

中国北京 – 2024年1月8日 - MulticoreWare Inc与Imagination Technologies共同宣布已在德州仪器TDA4VM处理器上实现了GPU计算&#xff0c;不仅使算力提升了约50 GFLOPS&#xff0c;而且还实现了自动驾驶和高级驾驶辅助系统&#xff08;ADAS&#xff09;常见工作负载性能的跃升…

使用Docker部署PDF多功能工具Stirling-PDF

1.服务器上安装docker 安装比较简单&#xff0c;这种安装的Docker不是最新版本&#xff0c;不过对于学习够用了&#xff0c;依次执行下面命令进行安装。 sudo apt install docker.io sudo systemctl start docker sudo systemctl enable docker 查看是否安装成功 $ docker …

前端项目由nginx迁移到apache httpd

前端项目由nginx迁移到apache httpd 前端项目存放目录为 /var/www/dist 虚拟主机端口80 反向代理拦截 /prod-api 后端服务地址 http://192.168.0.44:8097 <VirtualHost *:80>DocumentRoot /var/www/distServerName www.dist.com<Directory /var/www/dist>RewriteEn…

PCL 使用克拉默法则进行四点定球(C++详细过程版)

目录 一、算法原理二、代码实现三、计算结果本文由CSDN点云侠原创,PCL 使用克拉默法则进行四点定球(C++详细过程版),爬虫自重。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT生成的文章。 一、算法原理 已知空间内不共面的四个点,设其坐标为 A (…

鼠标随动指定区域高亮显示(Excel聚光灯)

实例需求&#xff1a;工作表中数据表实现跟随鼠标选中高亮效果&#xff0c;需要注意如下几个细节需求 数据表为连续区域&#xff0c;但是不一定从A1单元格开始数据表的前两行&#xff08;标题行&#xff09;不使用高亮效果数据表中已经应用了条件格式&#xff0c;高亮显示取消…

计算机网络专栏目录

1. http header 请求头 x-forwarded-for 2. HTTP/HTTPS、TLS/SSL 协议

redis持久化与SpringBoot整合

redis持久化与SpringBoot整合 1、Redis全局命令1.2、Redis事务 2、Redis持久化2.1、RDB方式2.1.1、客户端触发机制2.1.2、服务端触发机制2.2.3、配置生成快照名称和位置2.2.4、优点2.2.5、缺点 2.2、AOF方式2.2.1、优点2.2.2、缺点 2.3、RDB-AOF混合方式2.4、持久化机制的选择 …

0-快速了解

1.项目简介 RuoYi-Vue是一款基于SpringBootVue的前后端分离极速后台开发框架。 RuoYi 官网地址&#xff1a;http://ruoyi.vip(opens new window)RuoYi 在线文档&#xff1a;http://doc.ruoyi.vip(opens new window)RuoYi 源码下载&#xff1a;https://gitee.com/y_project/Ru…

Nginx配置jks格式证书,升级https

通常在给服务器升级https&#xff0c;需要在nginx上配置域名对应的https证书&#xff0c;nginx通常配置的是crt和key格式的证书。最近遇到有人提供了jks格式的证书&#xff0c;查阅了几个资料都是需要先将jks转为p12格式&#xff0c;然后再将p12转为crt格式。这里记录一下相关过…

在JavaFX中的module-info.java的大坑,实现怎么删除这个后不会报错“需要JavaFX运行组件”

如果你也是因为module-info导致项目一些依赖包不能用&#xff0c;那么可以试着删除这个模块&#xff1b;话不多说&#xff0c;请看image 1.首先删除你的module-info.java&#xff08;注意&#xff1a;你要是怕出错的话&#xff0c;建议提前备份你的项目&#xff09; 2.然后找到…

影视视频知识付费行业万能通用网站系统源码,三网合一,附带完整的安装部署教程

在数字化时代&#xff0c;知识付费行业逐渐成为主流。人们对高质量内容的需求日益增长&#xff0c;越来越多的人愿意为有价值的知识和信息服务付费。为了满足这一市场需求&#xff0c;罗峰给大家分享一款全新的影视视频知识付费网站系统源码&#xff0c;为用户提供一站式的知识…

c# 多循环如何跳出

如果内层循环满足某种条件时&#xff0c;你明确知道无需再执行外层循环剩余的部分&#xff0c;可以直接改变外层循环的控制变量值使其无法满足循环条件。 for (int i 0; i < 10; i) {for (int j 0; j < 10; j){if (SomeCondition(i, j)){i 10; // 直接将i设为超出范围…

Python列表append()函数使用详解

在Python中&#xff0c;列表是一种可变序列类型&#xff0c;可以用来存储多个元素。列表的append()函数是用于在列表末尾添加新元素的内置方法。本文将详细介绍Python列表的append()函数及其使用方法。 一、append()函数的基本语法 append()函数的语法非常简单&#xff0c;只…

Android Serializable 和 Parcelable 的详解以及代码示例(Kotlin)

1. Serializable和Parcelable的区别&#xff08;简单记忆&#xff09;&#xff1a; Serializable适用于简单的对象序列化&#xff0c;而Parcelable适用于需要更高效的对象序列化和反序列化的情况&#xff0c;特别是在Android开发中。 Serializable是Java平台的标准接口&#xf…

electron自定义窗口和右键菜单样式

前言 electron默认沿用系统UI&#xff0c;并没有提供很多接口供使用者定制样式&#xff0c;如果想要完全自定义的样式&#xff0c;目前我能想到的方案只能是通过前端自定义样式&#xff0c;然后通过进程通信来实现系统基础功能&#xff1a;最大/小化、关闭、拖动窗口等。 效果…

面试宝典进阶之关系型数据库面试题

D1、【初级】你都使用过哪些数据库&#xff1f; &#xff08;1&#xff09;MySQL&#xff1a;开源数据库&#xff0c;被Oracle公司收购 &#xff08;2&#xff09;Oracle&#xff1a;Oracle公司 &#xff08;3&#xff09;SQL Server&#xff1a;微软公司 &#xff08;4&#…

麒麟系统安装docker、mysql、clickhouse

1、查看麒麟系统版本信息 cat /etc/os-release 麒麟系统版本V10 64位操作系统 # uname -p x86_64 # uname -p aarch64 内核版本 # uname -r 4.19.90-24.4.v2101.ky10.x86_64 本操作为麒麟系统版本V10&#xff0c;x86_64操作系统 一&#xff0c;安装docker 文件&#xff1a…