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

Render Method Breaking When Mapping Value Inside

本文关键字：方法 中断 映射 在内部      更新时间：2023-09-26

我有一个组件（下拉列表），它应该基于作为"classes"道具从另一个组件传入的数组来填充列表。为了使它尽可能高效，我尝试使用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>
        )
    }
});

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

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

当您使用ES2015箭头函数并且您有多个参数时，您需要在参数周围加上括号，如下所示：

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

只有当您有一个参数时，才能省略括号。

相关文章：