诊断 RangeError:React KeyEscapeUtils 中超出了最大调用堆栈大小 [英] Diagnosing RangeError: Maximum call stack size exceeded in React KeyEscapeUtils

问题描述

背景

我们的 web 应用是使用 React 和 Redux 编写的，使用官方 react-redux 绑定.此 Web 应用程序中使用的另一个主要库是 PaperJS.我们最近将其转换为 Redux 应用程序，尽管它已经使用 React 一段时间了.

Our webapp is written with React and Redux using the official react-redux bindings. Another primary library used in this web app is PaperJS. We recently transitioned this to being a Redux app, though it has used React for a while.

问题

有时刷新(通常每隔一次刷新)会导致

Refreshing sometimes (usually every other refresh) causes a

RangeError: Maximum call stack size exceeded
at String.replace (<anonymous>)
at Object.unescape (KeyEscapeUtils.js:49)
at flattenSingleChildIntoContext (flattenChildren.js:32)
at flattenChildren.js:53
at traverseAllChildrenImpl (traverseAllChildren.js:69)
at traverseAllChildrenImpl (traverseAllChildren.js:85)
at traverseAllChildren (traverseAllChildren.js:157)
at flattenChildren (flattenChildren.js:52)
at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:209)
at ReactDOMComponent._updateChildren (ReactMultiChild.js:315)

这是失败的 React 源代码:

Here's the React source code where it's failing:

return ('' + keySubstring).replace(unescapeRegex, function (match) {
  return unescaperLookup[match];
});

并在上下文中:

/**
 * Unescape and unwrap key for human-readable display
 *
 * @param {string} key to unescape.
 * @return {string} the unescaped key.
 */
function unescape(key) {
  var unescapeRegex = /(=0|=2)/g;
  var unescaperLookup = {
    '=0': '=',
    '=2': ':'
  };
  var keySubstring = key[0] === '.' && key[1] === '$' ? key.substring(2) : key.substring(1);

  return ('' + keySubstring).replace(unescapeRegex, function (match) {
    return unescaperLookup[match];
  });
}

这可能表明我在代码中滥用了 React，但由于堆栈跟踪不包含对我自己的任何代码的引用，我不确定要查找什么.这似乎是一个无限循环的重新渲染，我怀疑这可能是由于对 setState 的调用不当造成的.

This is probably indicative that somewhere I'm misusing React in my code, but since the stacktrace does not include references to any of my own code, I'm not sure what to look for. It seems to be an infinite loop of re-rendering, and I'm suspicious that it might be due to an improperly placed call to setState.

问题

我的怀疑有可能吗?鉴于我自己的代码库相当广泛，我该如何进一步诊断这个问题?这在 KeyEscapeUtils 中失败是什么意思?

Is my suspicion likely? How can I further diagnose this issue, given that my own codebase is fairly extensive? What does it mean that this failed in KeyEscapeUtils?

推荐答案

我认为它失败的地方并不重要，因为你似乎陷入了无限循环，而这恰好是超出调用堆栈限制.

I don't think the place that it failed is significant, since you seem to be caught in an infinite loop, and this just happens to be the spot that the call stack limit is exceeded.

为了进行诊断，我会尝试在 chrome 开发工具中打开异常时暂停"(如果尚未打开)，并在暂停时进一步查找您自己的代码的堆栈跟踪.

In order to diagnose, I would try turning on 'Pause on Exceptions' in chrome dev tools, if it's not already, and looking further up the stack trace for your own code when it pauses.

您是正确的，不正确的 setState 调用可能会导致这种情况.例如，如果您在 componentDidUpdate 或渲染中未选中 setState 调用.奇怪的是，它只是偶尔发生.

You are correct that improper setState calls could be causing this. For instance, if you were calling setState unchecked in componentDidUpdate or render. It's curious though that it only happens sometimes.

这篇关于诊断 RangeError:React KeyEscapeUtils 中超出了最大调用堆栈大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！