ReactErrorUtils.invokeGuardedCallback 在 IE 浏览器中反复触发事件

Question

我在我的应用程序中使用 react 和 highchart。并且目前在 React 中面临一个奇怪的问题。我有一个菜单项，在它的点击事件上它做了一些处理（假设将图表导出为图像）。所以目前我观察到它在我的反应组件中的任何 setState 操作上被触发。当我查看调用堆栈时，我发现 ReactErrorUtils.invokeGuardedCallback 重复发送此事件。

是否有人遇到过类似的反应组件问题，即在任何 setState 操作上都触发了点击

Answer 1

已经有一段时间了，但是当我使用附加了相同类型的 eventListener 的嵌套组件时，我总是遇到这样的问题。例如一个带有 onClick 道具的外部组件和一个带有另一个 onClick 道具的内部元素。

如果内部元素被点击，事件会冒泡到外部元素，外部元素的 onClick 回调也会被调用。在堆栈跟踪中，您现在看到它是由invokeGuardedCallback调用的

阻止事件冒泡，调用

event.stopPropagation();

在内部元素的回调函数中。

可能还有其他情况 ivokeGuardedCallback 可以调用回调 - 以确保您始终可以阅读代码。