渲染复选框并更新数据

Question

我无法更改复选框的对象值数组。我甚至不确定我目前的方法是否正确，因为我不知道下一步该做什么。假设水果数据是一个ajax调用，它应该来自componentWillMount吗？我应该像this.setState({input:ajaxresponse})那样设置状态吗？我迷路了，这对我来说很难，因为我正在使用jquery。刚才我也读过有关redux的内容，我听说有人在redux中说你不使用setState，omg我迷路了。

http://jsbin.com/dodanahani/1/edit

class HelloWorldComponent extends React.Component {

  constructor(){
    super()
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      input: {}
    }
  }

  handleChange(e,key){
    console.log(e.target.checked)
    // how to update state here? 
  }

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

我想要实现的很简单：用户获取api数据，他知道他以前保存的数据，绑定到视图（复选框），然后他可以再次更新它们。我坚持要发回变化。