反应 |为什么 .map 在 .forEach 创建“超出最大调用堆栈大小”错误时起作用

Question

新的反应和玩弄它。看不出任何明显的原因，为什么我在使用 forEach 时出错，而在使用 map 时没有出错：

注意：我将其与符号一起使用（基于 backbone 的框架） 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

对

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>
    )
  }
});

效果很好。

我认为它与地图返回新对象有关...为什么这很重要？

Answer 1

forEach 总是 returns 未定义。

所以，你的第一个例子本质上是

<div>
  { undefined }
</div>

React 在渲染 undefined 时出现问题。

Answer 2

Check the docs on forEach。函数 forEach 将始终 return undefined.

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

这将导致以下代码

<div>
  { undefined }
</div>

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

只需使用 map，它实际上会 return 一组新的对象（基于您 return 在函数中的内容）。

反应 |为什么 .map 在 .forEach 创建“超出最大调用堆栈大小”错误时起作用

React | why does .map work when .forEach creates a ' Maximum call stack size exceeded' error

javascript

ampersand

reactjs