Javascript api响应中的数组，不接收true和false属性，以在React中动态创建复选框

我在React Redux web应用程序中根据api结果创建了动态复选框，但问题是复选框结果不会在onClick上更新，从而设置了新状态。应该能够使用setState函数更新状态

我尝试使用下面这个链接中的解决方案，但它对我不起作用，因为我从api接收的负载不包含选中属性或真/假属性

我收到的有效载荷如下：

flavors: Array(3)
0: {id: "1001", name: "Spicy"}
1: {id: "1002", name: "Hot"}
2: {id: "1003", name: "Mediterranean"}

应填充以下内容：

getInitialState = () => {

  const initialState = {
      customer: {
                  id: '',
                  firstName: '',
                  lastName: '',
                  email: ''        
                },
     flavours: []    //Array to be populated, what is desired: {Spicy: false, 
                     // Hot: false, Mediterranean: false} 
                     // is populated currently as : Spicy, Hot, 
                     //   Mediterranean
      },
  return initialState;
 }

从api和复选框处理程序方法获取有效负载：

 getAllFlavours() {
   const { dispatch } = this.props;
   dispatch(userActions.getFlavours()).then((response) => {
   var flavourList = [];
   for (var i = 0; i < response.flavours.length; i++) {
      flavourList.push(response.flavours[i].name);
    }
    this.setState({
      flavours: flavourList,
     });
   });
 }

 handleCheckboxChange(event) {
    const target = event.target;
    const isChecked = target.checked;
    const name = target.name;
    this.setState({ flavours: { ...this.state.flavours, [name]: 
    isChecked } });
  }

getAllFlavors（）{
const{dispatch}=this.props；
分派（userActions.getFlavours（））。然后（（响应）=>{
var-flavourList=[]；
对于（变量i=0；i

创建复选框方法：

render() {

let flavourCheckboxes = this.state.flavours.map((item, i) => {
  return (<FormGroup key={i}>
     <Col>
      <Label key={i}>{item}</Label>
      </Col>
      <Col>
      <Input key={i} name={item} type="checkbox" checked={item} onClick= 
       {this.handleCheckboxChange} />
      </Col>
    </FormGroup>)
 });

 return (
 // other html tags
   <CardBody>
      <Row>
         {flavourCheckboxes}  // checkboxes created
      </Row>
   </CardBody>
   // other html tags

render（）{
让flavourcheckbox=this.state.flavours.map（（项，i）=>{
返回(
{item}
)
});
返回(
//其他html标记
{flavourcheckbox}//已创建复选框
//其他html标记

我希望复选框能够选中和取消选中，并且在onclick触发时更新状态，但目前我选中了所有值，您不能取消选中它们

注意：还尝试使用defaultCheck而不是checked，onClick之后会产生映射未定义错误

---

在

getAllFlavours

中，我不知道您是否应该从api接收检查/未检查的值，但在

getAllFlavours

中设置状态时，您可以这样设置：

let flavourLists = { [name] : { isChecked : false } };

并覆盖

handleCheckboxChange

中的选中值，如下所示：

let flavourLists = { [name] : { isChecked : false } };

this.setState（{flavours:{…this.state.flavours，[name]：{isChecked:true}}}）

---

在render now中相应地访问状态值。

复选框值不需要true或false，它可以是选中的，也可以是不选中的。所以我所要做的就是删除

checked={item}

这就是无论我是否更改状态，复选框都保持勾选状态的原因。

尝试

onChange={this.handleChange}

而不是onClick@PrabhatMishra我尝试了

OnChange={this.handleChange}

仍然是相同的结果。它是否需要将有效负载更改为

flavor:{spice:false，Hot:false}

，因为目前它只是

flavor:{spice，Hot}

。我想问题就在这里。谢谢你借给我正确的方向。我的问题实际上是

checked={item}

在删除后，它工作正常。