诊断 RangeError：React KeyEscapeUtils 中超出了最大调用堆栈大小

背景

我们的 Web 应用程序是使用官方的 React-Redux 绑定用 React 和 Redux 编写的。此网络应用程序中使用的另一个主要库是PaperJS http://paperjs.org/。我们最近将其转变为 Redux 应用程序，尽管它已经使用 React 一段时间了。

问题

有时刷新（通常是每隔刷新一次）会导致

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 源代码：

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.

问题

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

我搜索了unescape翻遍了React（15.4版本）的源码，只发现一处使用了它。该文件是react/lib/flattenChildren.js:

function flattenSingleChildIntoContext(traverseContext, child, name, selfDebugID) {
  // We found a component instance.
  if (traverseContext && typeof traverseContext === 'object') {
    var result = traverseContext;
    var keyUnique = result[name] === undefined;
    if (process.env.NODE_ENV !== 'production') {
      if (!ReactComponentTreeHook) {
        ReactComponentTreeHook = require('./ReactComponentTreeHook');
      }
      if (!keyUnique) {
        process.env.NODE_ENV !== 'production' ? warning(false, 'flattenChildren(...): Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, only ' + 'the first child will be used.%s', KeyEscapeUtils.unescape(name), ReactComponentTreeHook.getStackAddendumByID(selfDebugID)) : void 0;
      }
    }
    if (keyUnique && child != null) {
      result[name] = child;
    }
  }
}

它是在flattenSingleChildIntoContext- 它在堆栈跟踪中的显示方式。有问题的行尝试显示警告：

process.env.NODE_ENV !== 'production' ? warning(false, 'flattenChildren(...): Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, only ' + 'the first child will be used.%s', KeyEscapeUtils.unescape(name), ReactComponentTreeHook.getStackAddendumByID(selfDebugID)) : void 0;

这意味着最大调用堆栈错误仅发生在开发模式下。问题是你正在某个地方渲染两个或多个具有相同键的元素。要知道关键是什么，您可以在 Chrome 开发工具中的这一行中使用断点。或者您可以添加console.log在那里并抛出异常，以便它立即停止执行：

  if (!keyUnique) {
    console.log('key is not unique', name);
    throw new Error('Key is not unique');
  }

如果您以这种方式获得密钥，您将能够找到具有重复密钥的元素的位置。