.map() 什么都不做并且没有错误 - 反应答案

【问题标题】：.map() doing nothing and casting no error - react.map() 什么都不做并且没有错误 - 反应
【发布时间】：2016-03-11 09:10:37
【问题描述】：

我正在使用 Reactjs，es6/2015 进行编程。所以我试图 .map() 在一个数组上，（就像我以前做过很多次一样）。当我将数组打印到控制台时，我得到了所有正确的信息，但没有任何反应。我无法渲染我想要的组件或简单的 h1。控制台或我的 web-pack 手表中没有错误。我根本不知道出了什么问题，该代码与我写的几乎一字不差的其他代码相匹配，而其他代码则有效。两者之间唯一真正的区别是不同的 var 名称。我的代码：

show = [{content}, {content}, {content}];

render () {
 return <div className="box">
  {show.map( (item, key) => {
    <MyComponent item={item} key={key} 
                 choice={this.choice.bind(this)} />
  })}
 </div>;
 }

感谢任何帮助。

【问题讨论】：

在es2015箭头函数语法中，如果你没有将函数体指定为单行，那么你需要使用花括号来定义函数体并使用return语句从函数体。在您的映射器函数中，您有卷曲，但没有返回语句。
@harun 请不要用线条来描述它（例如“one-liner”）——重要的是它是否是一个表达式。更多内容请参见my post here。
@JMM 感谢您的澄清。
@harun np。我认为避免这种措辞将有助于那些不完全理解它的人不会感到困惑。

标签： reactjs ecmascript-6

【解决方案1】：

你应该在 map 函数中返回，否则你只有一个空数组。

你的组件应该是：

render () {
 return <div className="box">
  {show.map( (item, key) => {
    return <MyComponent item={item} key={key} choice=this.choice.bind(this)} />
  })}
 </div>;
 }

据我所知，返回值不需要括号（我从不使用它们，也从未遇到任何问题）。

【讨论】：

谢谢！有点尴尬，我没有注意到，很高兴你的帮助！