Javascript react map over input复选框获得意外标记 render（）{ return（this.list.map（obj=>）） }

为什么上面的代码不起作用？获得意外标记。

您忘记将

映射

部分包装在

{}

中，请按如下方式编写：

render() {
  return (<div> this.list.map(obj => <input value={obj.name} type="checkbox" />)</div>)
}

render（）{
返回(
{this.list.map（obj=>）}
)
}

为每个输入元素分配唯一的

键

---

如果list是一个

状态

变量，那么您需要写入

此.state.list

，不确定是否使用了相同的代码。

您需要将

映射

括在花括号中。代码应如下所示：

render() {
   return (
      <div> 
         {this.list.map(obj => <input key={obj.name} value={obj.name} type="checkbox" />)}
      </div>
   )
}

类HelloWidget扩展了React.Component{
建造师（道具）{
超级（道具）；
此列表=[{
“id”：“展览”，
“名称”：“展览”
}, {
“id”：“节日音乐会”，
“名称”：“节日和音乐会”
}, {
“id”：“盛大开幕式”，
“名称”：“盛大开幕”
}]
}
render（）{
报税表（
{this.list.map（obj=>）}
)
}
}
React.render（，document.getElementById（'container'）；

---

这会有用的

如果要在React组件中使用代码，则需要将代码用花括号括起来。@MichaelLyons现在怎么了？在div括号符号中有很多空格。检查此项：某些格式问题不会提供不必要的空格，它正在工作：

class HelloWidget extends React.Component {
    constructor(props) {
      super(props);
      this.list = [{
        "id": "exhibitions",
        "name": "Exhibitions"
      }, {
        "id": "festivals_n_concerts",
        "name": "Festivals & Concerts"
      }, {
        "id": "grand_opening",
        "name": "Grand Opening"
      }]
    }

    render() {
      return ( 
        <div> 
            {this.list.map(obj => <input key={obj.name} value={obj.name} type="checkbox" />)} 
        </div>
      )
    }


  }

React.render( <HelloWidget /> , document.getElementById('container'));