Javascript react中的“渲染”复选框和“更新数据”

我无法更改复选框的对象值数组。我甚至不确定我目前的方法是否正确，因为我不知道下一步该怎么做。假设水果数据是一个ajax调用，它应该来自componentWillMount，对吗？我应该像

this.setState（{input:ajaxresponse}）

那样设置状态吗？我迷路了，这对我来说很难，因为我在使用jquery。刚才我也读过关于redux的文章，我听到人们在redux里说你不用setState，天哪，我迷路了

类HelloWorldComponent扩展了React.Component{
构造函数（）{
超级（）
this.handleChange=this.handleChange.bind（this）；
此.state={
输入：{}
}
}
手柄更换（e，钥匙）{
console.log（e.target.checked）
//如何在这里更新状态？
}
render（）{
常数数据={
“水果”：[
{“name”：“banana”，“value”：true}，
{“name”：“西瓜”，“value”：false}，
{“name”：“lemon”，“value”：true}，
]
}
返回(
{data.fruits.map（obj=>
{obj.name}
this.handleChange（e，obj.name）}type=“checkbox”defaultChecked={obj.value}/>
)}
{this.state.fruits}

);
}
}

---

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

请看这个。另外，在熟悉每个概念之前，不要阅读关于redux的文章；当您希望将状态与组件解耦或需要全局应用程序状态时，redux很好。您应该使用redux来更改应用程序的状态，包括一些全局数据。谁说不能用setState更改组件的状态？

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>
    );
  }
}