Javascript ReactJS复选框选中多个未更新

我很难修复这个组件。使用复选框选择多个项目时出错。但在我的另一个组件中，没有错误，代码相同。请检查我下面的代码，谢谢大家

export default class TreeNode extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            collapsed: true,
            checked: []
        }
    }

    onClick(){
        this.setState({
            collapsed : !this.state.collapsed
        });
    }    

    checkBoxHandle(id,e){
        if (e.target.checked){
            let {checked} = this.state
            checked.push(id)
            this.setState({checked :checked })
        } else{
            //If checkbox uncheck = remove in the list
            let {checked} = this.state
            const getIndex = checked.indexOf(id)
            checked.splice(getIndex,1)
            this.setState({checked : checked})
        }
    }

    render(){

        let subtree = null;
        if (this.props.data.children){
            subtree = this.props.data.children.map(function(child){
                return <TreeNode  key= {child.id} data ={child} />;
            }.bind(this))
        }
        const temp_id = this.props.data.id
        var arrowClassName = 'tree-node-arrow';
        var containerClassName = 'tree-node-children'
        if (subtree){
            return (
                <div className="tree-node">       
                    <input type="checkbox" onClick ={this.checkBoxHandle.bind(this,this.props.data.id)}/>
                    <a data-id={this.props.data.id}>
                        {this.props.data.description}
                    </a>

                    <div className={containerClassName}>
                        {subtree}
                    </div>
                </div>
              );
        }
        else {
            return (
                <div className="tree-node-leaf">
                   <input type="checkbox" onClick ={this.checkBoxHandle.bind(this,this.props.data.id)}/>
                    <a data-id={this.props.data.id}>
                        {this.props.data.description}
                    </a>
                </div>
            );
        }
    }
}

导出默认类TreeNode扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
对,，
选中：[]
}
}
onClick（）{
这是我的国家({
折叠：！this.state.collapsed
});
}    
checkBoxHandle（id，e）{
如果（例如，选中目标）{
让{checked}=this.state
选中。推送（id）
this.setState（{checked:checked}）
}否则{
//如果复选框取消选中=在列表中删除
让{checked}=this.state
const getIndex=checked.indexOf（id）
选中。拼接（getIndex，1）
this.setState（{checked:checked}）
}
}
render（）{
设子树=null；
if（this.props.data.children）{
子树=this.props.data.children.map（函数（子函数）{
返回；
}.绑定（本）
}
const temp_id=this.props.data.id
var arrowClassName='树节点箭头'；
var containerClassName='树节点子节点'
if（子树）{
返回(
{this.props.data.description}
{子树}
);
}
否则{
返回(
{this.props.data.description}
);
}
}
}

---

每次有选中的项目时，我都会更新选中的状态，如果用户取消选中复选框，我会将其删除。

这是因为当组件的状态不可变时，您对选中的

使用可变方法，如
推送
和
拼接
。因此，使用rest运算符和
filter
方法以不变的方式执行此操作，如下所示：

class Checkboxes extends React.Component {
  state = {
    checked: []
  };

  onChange = (e) => {
    const { checked } = this.state;
    const { id } = e.target;
    if (checked.indexOf(id) === -1) {
      this.setState({
        checked: [...checked, id]
      });
    } else {
      this.setState({ checked: checked.filter(checkedId => checkedId !== id) });
    }
  }

  render() {
    const { checked } = this.state;
    console.log(`CHECKED: ${checked}`);
    return (
      <div className="checkboxes">
        <label htmlFor="checkbox1">Checkbox 1</label>
        <input type="checkbox" onChange={this.onChange} id="1" checked={checked.indexOf("1") !== -1} />
        <br />
        <label htmlFor="checkbox2">Checkbox 2</label>
        <input type="checkbox" onChange={this.onChange} id="2" checked={checked.indexOf("2") !== -1} />
        <br />
        <label htmlFor="checkbox3">Checkbox 3</label>
        <input type="checkbox" onChange={this.onChange} id="3" checked={checked.indexOf("3") !== -1} />
      </div>
    );
  }
}

类复选框扩展了React.Component{
状态={
选中：[]
};
onChange=（e）=>{
const{checked}=this.state；
const{id}=e.target；
如果（已选中。indexOf（id）=-1）{
这是我的国家({
选中：[……选中，id]
});
}否则{
this.setState（{checked:checked.filter（checkedId=>checkedId！==id）}）；
}
}
render（）{
const{checked}=this.state；
log（`CHECKED:${CHECKED}`）；
返回(
复选框1


复选框2


复选框3
);
}
}

是工作代码笔示例。
您得到的错误是什么？没有错误，只有错误的输出。它没有在我的状态下更新选中的数组。选中此图片：我的错误是我的复选框onchange和Change state应位于父组件中。我现在明白了。谢谢你的回答这不是个好办法。它在父级中工作，因为您的子组件在每次获得新道具时都会更新。使用状态时，由于数组保持不变（元素不同，但数组对象具有相同指针），因此不会再次渲染组件。如果您尝试使用React.PureComponent优化应用程序，即使onChange和state位于父级，您也会收到相同的错误，因为PureComponent会像state一样比较上一个和下一个道具。所以我建议你改变你所在州的变异方法。