Reactjs 材料未受控

我正在使用材质UI工具包进行React。 我正在根据状态动态生成复选框并更新它们

但我得到了不受控制的元素错误

this.state = {
    services : [{service: "s1", value: false},
                {service: "s2", value: false},
                {service: "s3", value: false},
               ]
};

handleServiceCheck = (i) => {
    let services = this.state.services;
    services[i].value = !services[i].value;
    this.setState({ services: services });
};

this.state.services.map((service, i) => (
    <FormControlLabel key={i}
        control={
            <Checkbox
                checked={service.value}
                onChange={() => this.handleServiceCheck(i)}
                value={service.service}
                className={classes.checkBox}
            />
        }
        label={service.service}
    />
))

this.state={
服务：[{服务：“s1”，值：false}，
{服务：“s2”，值：false}，
{服务：“s3”，值：false}，
]
};
handleServiceCheck=（i）=>{
让services=this.state.services；
服务[i]。值=！服务[i]。值；
this.setState（{services:services}）；
};
this.state.services.map（（服务，i）=>(
}
label={service.service}
/>
))

---

这里有几个问题

首先，

Checkbox

的

checked

属性需要一个布尔值，但是您要传递整数

第二，在改变以前的状态时，不应该原地改变它，应该将一个函数传递给

setState

，该函数接受以前的状态并返回新状态

handleServiceCheck = (i) => {
  this.setState(prevState => ({services: 
    prevState.services.map((s, idx) => {
      return i === idx
        ? { ...s, value: !s.value }
        : s
    })
  }));
};

---

这是我用完整的修复工作版本创建的一个解决方案。

您好，这解决了我的问题。非常感谢你。