内部映射值时渲染方法中断答案

【问题标题】：Render Method Breaking When Mapping Value Inside内部映射值时渲染方法中断
【发布时间】：2016-05-14 20:57:28
【问题描述】：

我有一个组件（一个下拉列表），它应该根据从另一个组件作为“类”属性传入的数组来填充列表。为了使其尽可能高效，我尝试使用 Object.keys 和 Array.prototype.map 方法循环遍历我的数组、填充列表和渲染。但是，每当我添加这个组件时，它都会导致我的整个应用程序根本无法呈现。我在下面列出了我的渲染方法。

渲染方法：

export default React.createClass({

    change: function(){
        console.log(this.props.classes);
    },

    render: function(){

        return(
            <div>

             <select onChange = {this.change}>
             {
                Object.keys(this.props.classes).map(value, key =>{

                return <option key = {key}>{value}</option>
                }
             )}
              </select>
            </div>

        )

    }

});

【问题讨论】：

您能发布一个classes 对象的示例吗？此外，循环遍历对象的键会以随机顺序为您提供键。

标签： javascript reactjs ecmascript-6

【解决方案1】：

我认为回调参数需要额外的括号：

export default React.createClass({

    change: function(){
        console.log(this.props.classes);
    },

    render: function(){

        return(
            <div>

             <select onChange = {this.change}>
             {
                Object.keys(this.props.classes).map((value, key) =>{

                return <option key = {key}>{value}</option>
                }
             )}
              </select>
            </div>

        )

    }

});

【讨论】：

【解决方案2】：

当你使用 ES2015 箭头函数并且你有多个参数时，你需要在参数周围加上括号，像这样：

Object.keys(this.props.classes).map((value, key) => {
   return <option key={key}>{value}</option>
 }

只有一个参数才可以省略括号。

【讨论】：

谢谢，我不知道不止一个论点是这种情况