Javascript 在使用es6映射时反应意外令牌

我找不到哪里出了问题，也看不出jsbin中哪一行有问题

类HelloWorldComponent扩展了React.Component{
构造函数（）{
超级（）
this.handleChange=this.handleChange.bind（this）
}
手变（e）{
console.log（例如target.value）
}
render（）{
常数数据={
“水果”：[
{“name”：“banana”，“value”：true}，
{“name”：“西瓜”，“value”：false}，
{“name”：“lemon”，“value”：true}，
]
}
报税表（
{data.fruits.map（obj=>
{obj.name}
this.handleChange（e）}type=“checkbox”defaultChecked={obj.true}/>
)}
);
}
}
反应(
,
document.getElementById（'react\u example'）
);

---

尝试超过15分钟，无法发现问题，需要帮助

您需要将map函数包装为

return (
    <div>{data.fruits.map(obj => (
            <div>
                <label>{obj.name}</label>
                <input onChange={(e) => this.handleChange(e)} type="checkbox" defaultChecked={obj.true} />
            </div>
        )
    )}</div>
);

返回(
{data.fruits.map（obj=>(
{obj.name}
this.handleChange（e）}type=“checkbox”defaultChecked={obj.true}/>
)
)}
);

---

可以返回单个组件，但可以映射返回数组

我认为您缺少一个左括号，而且map必须有一个return子句：

return (      
    {data.fruits.map(obj => 
     //Your are missing this parenthesis and the return instruction
     return (
       <div>
         <label>{obj.name}</label>
         <input onChange={(e) => this.handleChange(e)} type="checkbox" defaultChecked={obj.true}/>
       </div>
     )}
);

返回（
{data.fruits.map（obj=>
//您缺少此括号和返回指令
返回(
{obj.name}
this.handleChange（e）}type=“checkbox”defaultChecked={obj.true}/>
)}
);

将常量移到类之外，并创建了一个

\u drawlayout

方法，它成功了

const data = {
  "fruits":[
    {"name":"banana","value":true},
    {"name":"watermelon","value":false},
    {"name":"lemon","value":true},
  ]
}

class HelloWorldComponent extends React.Component {

  constructor(){
    super()
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e){
    console.log(e.target.value)
  }

  _drawLayout() {
    return data.fruits.map(obj => {
      return(
        <div>
          <label>{obj.name}</label>
          <input onChange={e => this.handleChange(e)} type="checkbox" defaultChecked={obj.true}/> 
        </div>
      )
    })
  }

  render() {
    return (      
        <div>
          {this._drawLayout()}
        </div>
    );
  }
}

React.render(
  <HelloWorldComponent name="Joe Schmoe"/>,
  document.getElementById('react_example')
);

const数据={
“水果”：[
{“name”：“banana”，“value”：true}，
{“name”：“西瓜”，“value”：false}，
{“name”：“lemon”，“value”：true}，
]
}
类HelloWorldComponent扩展了React.Component{
构造函数（）{
超级（）
this.handleChange=this.handleChange.bind（this）
}
手变（e）{
console.log（例如target.value）
}
_drawLayout（）{
返回data.fruits.map（obj=>{
返回(
{obj.name}
this.handleChange（e）}type=“checkbox”defaultChecked={obj.true}/>
)
})
}
render（）{
报税表（
{this.\u drawLayout（）}
);
}
}
反应(
,
document.getElementById（'react\u example'）
);

---

编辑：map（）方法需要一个返回。

这太令人困惑了。看看Andrew的答案。一开始我同意这有点困惑。但react的主要目标是创建可重用代码。映射后，您的组件将类似于

return（）

等等。但是你不能在高级别上返回3个div。所有内容都必须包装在一个包装中。好的，我知道了。我经常看到人们总是在返回行之后包装他们的内容。

const data = {
  "fruits":[
    {"name":"banana","value":true},
    {"name":"watermelon","value":false},
    {"name":"lemon","value":true},
  ]
}

class HelloWorldComponent extends React.Component {

  constructor(){
    super()
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e){
    console.log(e.target.value)
  }

  _drawLayout() {
    return data.fruits.map(obj => {
      return(
        <div>
          <label>{obj.name}</label>
          <input onChange={e => this.handleChange(e)} type="checkbox" defaultChecked={obj.true}/> 
        </div>
      )
    })
  }

  render() {
    return (      
        <div>
          {this._drawLayout()}
        </div>
    );
  }
}

React.render(
  <HelloWorldComponent name="Joe Schmoe"/>,
  document.getElementById('react_example')
);