javascript - 使用 es6 的 map 对意外标记使用react

Question

我找不到问题所在，看不到jsbin中哪一行有问题。 http://jsbin.com/bewigabomi/edit?js,console,output

class HelloWorldComponent extends React.Component {

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

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

  render() {
    const data = {
      "fruits":[
        {"name":"banana","value":true},
        {"name":"watermelon","value":false},
        {"name":"lemon","value":true},
      ]
    }
    return (      
        {data.fruits.map(obj => 
         <div>
           <label>{obj.name}</label>
           <input onChange={(e) => this.handleChange(e)} type="checkbox" defaultChecked={obj.true}/>
         </div>
         )}
    );
  }
}

React.render(
  <HelloWorldComponent/>,
  document.getElementById('react_example')
);

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

Answer 1

将常量移到类之外并创建一个 _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')
);

编辑:ma​​p()方法需要有一个返回值。