在JSX中使用for循环迭代和返回元素[重复]答案

【问题标题】：Iterating and return elements using for loop in JSX [duplicate]在JSX中使用for循环迭代和返回元素[重复]
【发布时间】：2018-01-11 19:22:54
【问题描述】：

我试图通过使用循环来迭代和调用我的组件来访问我的组件。我没有遇到语法错误，但是我没有从循环中得到所需的元素。这是我尝试过的示例代码。

    render() {
    return (
      <div>
            {this.genThumbnail([{'src':'../../resources/images/p1.jpg', 'mode':'normal'},
            {'src':'../../resources/images/p2.jpg', 'mode':'normal'},
            {'src':'../../resources/images/p3.jpg', 'mode':'normal'},
            {'src':'../../resources/images/p4.jpg', 'mode':'landscape'},
            {'src':'../../resources/images/p5.jpg', 'mode':'portrait'},
            {'src':'../../resources/images/p6.jpg', 'mode':'landscape'}])}

          </div>
        </div>
)
}

genThumbnail(nails) {
    debugger;
    let src, mode;
    return(
      <div>
        {
          nails.forEach(function (data,index){
              return <ThumbNail imgsrc={data.src} mode={data.mode}/>
          }
        )
        }
      </div>

    )

  }

我不得不使用 map() 辅助方法来实现这一点。任何人都请澄清 forEach 的缺点。

【问题讨论】：

标签： javascript reactjs ecmascript-6 jsx

【解决方案1】：

问题在于forEach doesn't return anything。它是for 循环的替身。即使您在回调中返回一个值，它也不会返回任何内容。 forEach（基本上）是这样写的：

Array.prototype.forEach = function(callback) {
  for (let i = 0; i < this.length; i++) {
    callback(this[i]); // Notice it doesn't use the return value
  }
};

map on the other hand返回一个新数组，使用回调函数的返回值判断数组中的每一项是什么。

所以简短的回答是：forEach 按照设计不返回任何内容。 map 之所以有效，是因为它确实返回了一个数组，再次，按设计。

【讨论】：

forEach 中的 return 语句怎么样？
@BilalSaeed 仅仅因为您从传递给forEach 的回调中返回了一个值，并不意味着forEach 将返回任何内容。 forEach 完全忽略了回调的返回值。
@BilalSaeed 如有疑问，请阅读方法 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 的文档。清楚地告诉你它返回undefined

【解决方案2】：

Array.forEach 不返回任何内容。改用Array.map，它会返回一个新数组

return(
      <div>
        {
          nails.map(function (data,index){
              return <ThumbNail imgsrc={data.src} mode={data.mode}/>
          }
        )}
      </div>
    )

【讨论】：

我已经用 map 完成了，我在问为什么不能使用 forEach？
@BilalSaeed map 和 forEach 之间存在差异。 map 函数返回一个新数组，该数组的每个元素都是传递给它的回调函数返回的值。另一方面，forEach 函数对它的回调返回的值不做任何事情并返回 undefined。