Javascript 反应-将数组传递到setState？

如何将数组传递到

setState

？如您所见，有一个复选框用于呈现，一旦调用了

onchange

，id就会进入状态，但如果有多个复选框，则每次调用

onchange

时都会覆盖该复选框

  getInitialState() {
    return {
        listid: []
    }
},    


  handleChange() {
    this.setState({
        listid: e.target.name,
    });
},

 renderCheckbox() {
    const data = this.state.data || [];
    return data.map((list, i) => {
        return (
            <Checkbox
                key={i}
                onChange={this.handleChange}
                name={list.id}
                value="Yes"
                label={description}
            />
        );
    });
},

getInitialState（）{
返回{
listid:[]
}
},    
handleChange（）{
这是我的国家({
listid:e.target.name，
});
},
renderCheckbox（）{
const data=this.state.data | |[]；
返回data.map（（列表，i）=>{
返回(
);
});
},

由于它是一个包含多个复选框状态的数组，您需要告诉

handleChange

要更改的复选框：

<Checkbox
  key={i}
  onChange={(e) => this.handleChange(e, i)}
  name={list.id}
  value="Yes"
  label={description}
/>

---

---

一个更好的方法是将索引

i

作为一个道具传递给

复选框

，然后执行：

this.props.onClick（this.props.index）

或类似操作。

啊，经典。以下是您可以对

renderCheckBox

所做的更改

        <Checkbox
            key={i}
            onChange={(el) => this.handleChange(el, i)}
            name={list.id}
            value="Yes"
            label={description}
        />

---

如果

listid

数组中存在复选框id，则可以签入

handleChange

函数。如果是，则将其删除。如果不是，则添加它

然后，可以检查render方法中的

listid

数组中是否存在复选框id，以决定是否应选中它

示例

类应用程序扩展了React.Component{
状态={
复选框：[{id:“1”}，{id:“2”}，{id:“3”}，{id:“4”}]，
listIds:[]
};
handleChange=事件=>{
const{name}=event.target；
this.setState（prevState=>{
const{listIds}=prevState；
if（listIds.includes（name））{
返回{listIds:listIds.filter（id=>id！==name）}；
}否则{
返回{listIds:[…listIds，name]}；
}
});
};
render（）{
const{checkbox，listIds}=this.state；
返回(
{checkbox.map（checkbox=>(
))}
);
}
}
render（，document.getElementById（“根”））

所以你想保留一个
listid
数组，指示复选框是否被选中？是的，这正是我想要它做的。我本来打算写一个非常类似的代码，因为你总是很快：）但是，我很高兴我能得出类似于这些情况的结论。我觉得我每天都在进步。我遇到了一个未捕获的错误：MergeInToWithNodeUpplicateKeys（）：尝试用同一个键合并两个对象：errorsHi在那里。改变状态是不可取的。您可以使用
const listid=[…this.state.listid]，而不是直接分配它我获取未捕获错误：MergeInToWithNodeUpplicateKeys（）：尝试使用相同的键合并两个对象：
错误
        <Checkbox
            key={i}
            onChange={(el) => this.handleChange(el, i)}
            name={list.id}
            value="Yes"
            label={description}
        />

handleChange(el, index) {
  let listid = [ ...this.state.listid ];
  listid[index] = el.target.name;
  this.setState({
    listid,
});