Question

React | 当 .forEach 创建“超出最大调用堆栈大小”错误时，为什么 .map 可以工作

2015-07-06

762

javascript reactjs ampersand

刚接触 React，正在尝试使用它。看不出使用 forEach 时出现错误而使用 map 时没有错误的任何明显原因：

注意：我将其与 ampersand（基于骨干的框架）一起使用 Repos = 30 个对象，每个对象有 3 个属性

export default React.createClass({
  mixins: [ampersandReactMixin],
  displayName: 'ReposPage',
  render() {
    const {repos} = this.props

    return (
      <div>        
        {
          repos.forEach((repo) => {

            return (              
              <div key={repo.id}>
                <span>goodbye world</span>
              </div>
            )
          })
        } 
      </div>
    )
  }
});

输出如下：

Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child.
warning.js:48 Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child.
warning.js:48 Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child.
traverseAllChildren.js:67 
Uncaught RangeError: Maximum call stack size exceeded

vs

export default React.createClass({
  mixins: [ampersandReactMixin],
  displayName: 'ReposPage',
  render() {
    const {repos} = this.props

    return (
      <div>        
        {
          repos.map((repo) => {

            return (              
              <div key={repo.id}>
                <span>goodbye world</span>
              </div>
            )
          })
        } 
      </div>
    )
  }
});

运行正常。

我认为这与 map 通过以下方式返回新对象有关...这到底有什么关系？

Answer 1

forEach 总是返回未定义。

因此，您的第一个例子本质上是

<div>
  { undefined }
</div>

React 似乎在渲染未定义时出现问题。

Answer 2

查看 forEach 上的文档。函数 forEach 将始终返回 undefined 。

repos.forEach((repo) => {
  return (/* ... */);
})

这将导致以下代码

<div>
  { undefined }
</div>

正如错误所述， undefined 不是有效的 DOMElement 。由于某种原因，此错误触发了堆栈溢出。

只需使用 map ，它实际上将返回一组新对象（基于您在函数内部返回的内容）。