Question

我找不到有什么问题，看不出jsbin中有哪些行有问题。 http://jsbin.com/bewigabomi/edit?js,console,output

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

尝试超过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')
);

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

Answer 2

您需要将地图功能包装为

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

您可以返回单个组件但返回map return array;

Answer 3

我认为你缺少左括号，而且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>
     )}
);

使用es6的地图反应意外的令牌

3 个答案: