项目场景：

使用React的NavLink标签作为菜单列表，点击菜单列表按钮，动态更换菜单名称

问题描述

点击菜单NavLink时报错出现如下信息

Warning:
This synthetic event is reused for performance reasons.
If you're seeing this, you're accessing the property `nativeEvent` on a released/nullified synthetic event.
This is set to null.
If you must keep the original synthetic event around, use event.persist().
See https://fb.me/react-event-pooling for more information.

例子

// 其他无关紧要部分省略了
<input onChange={event => {console.log(event.type)  // changesetTimeout(() => {console.log(event.type)  // null，并会出现以上警告})
}} />

原因分析：

我们在react中操作的DOM事件，获取到的事件对象，其实是react内部帮我们合成的。为了节约性能，会使用对象池，当一个合成事件对象被使用完毕，即同步代码实现完毕后，会再次调用并且将其属性全部设为Null，所以当我们异步访问或者打印时，显示的属性值已经是null值

解决方案：

如果要以异步方式访问事件属性，应该对事件调用 event.persist()，这将从池中删除合成事件，并允许用户代码保留对事件的引用。它会将当前的合成事件对象从对象池抽离出来，这样就不会再被调用并且其属性不会变为Null.

将 event事件对象传入方法，

<div onClick={(event) => this.mouseOut('关注QC班长',event)}><NavLink to="/largeScreen/fireworks/home" activeClassName={styles.activeNav}><SlackOutlined style={{ marginRight: '5px' }} />关注QC班长</NavLink>
</div>

在方法中调用event.persist()即可

 mouseOut = (menuName,event) => {this.setState({ visible: 'none' })this.setState({ isActive: true })if (menuName !== '') {event.persist()// 从事件池中移除该合成函数并允许对该合成事件的引用被保留下来。this.setState({ activeMenuName: menuName })}}

参考文献

0、合成事件(SyntheticEvent) – React 中文文档 v16.6.3

1、react 合成事件关于event.persist()的报错_coderlin_的博客-CSDN博客

2、https://www.jianshu.com/p/bf390141fae8

3、2020/09/20 React中获取target（报错信息Warning: This synthetic event is reused for performance reasons.）_六月要好好加油呀的博客-CSDN博客

React报错Warning: This synthetic event is reused for performance reasons. If you‘re seeing this, 解决方法相关推荐

2020/09/20 React中获取target（报错信息Warning: This synthetic event is reused for performance reasons.）
如下图,我要获取到点击的li 我的代码 return中的内容函数 -这里要加上 event.persist() 否则只有第一次点击能够获取到target,再次会报错,显示target:null,报错 ...
[react] This synthetic event is reused for performance reasons. If you‘re seeing this, you‘re access
error This synthetic event is reused for performance reasons. If you're seeing this, you're accessin ...
【react】This synthetic event is reused for performance reasons.
html代码 <form onSubmit={this.submit.bind(this)}><input type="text" name="user ...
报错:/BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3512.29.5/UITableView.m:7943解决方法
报错:/BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3512.29.5/UITableView.m:7943解决方法 ...
【svn】svn报错：“Previous operation has not finished； run ‘cleanup‘ if it was interrupted“ 的解决方法
[svn]svn报错:"Previous operation has not finished; run 'cleanup' if it was interrupted" 的解决方 ...
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#Object‘的解决方法...
发现问题运行一下以前的一个Vue+webpack的 vue仿新闻网站小项目,报错由于自己vue学习不深入,老是这个报错,找了好久(确切的说是整整一下午^...^)才找到原因 -v- Uncau ...
mysql报错：This version of MySQL doesn’t yet support ‘LIMIT IN/ALL/ANY/SOME 解决方法
最近使用MySQL5.6查询表的前几条数据,使用了limit语句,结果出现错误:This version of MySQL doesn't yet support 'LIMIT & IN/AL ...
mysql报错ERROR 1206 (HY000): The total number of locks exceeds the lock table size的解决方法...
1. 问题背景 InnoDB是新版MySQL(v5.5及以后)默认的存储引擎,之前版本的默认引擎为MyISAM,因此,低于5.5版本的mysql配置文件.my.cnf中,关于InnoD ...
登录mysql报错Failed to connect to backoff 或 Failed to get D-Bus connection: Operation not permitted解决方法
报错: Failed to get D-Bus connection: Operation not permitted 或 mysql -u root -p 登录mysql时报错 2020-09-16 ...

React报错Warning: This synthetic event is reused for performance reasons. If you‘re seeing this, 解决方法