reactjs - react 即使在删除后它仍然处于检查状态

Question

我选择要删除的项目，然后将其删除。然后，其余项目显示为已选中。

如果有 item1, item2, item3, item4 并检查项目 1,2 并删除它们。然后，只剩下第 3 项和第 4 项，但呈现为选中状态。我怎样才能初始化它？

this.state = {
    options: [],
    subject: []
    ....
}

_delete() {
    const selected = this.state.options
    const newList = this.state.subject

    if(selected.length !== 0){
        if(selected.length > 1){
            let i
            selected.sort(function(a, b) {
                return b - a;
                // 11, 10, 4, 3, 2, 1
            });
            for(i=0; i<selected.length; i++){
                newList.splice(selected[i],1)
            }
        }

        else{
            newList.splice(selected[0],1)
        }     
    }

    this.setState({options: [], subject: newList})


render(){
    return(
        {this.state.subject.map((item, index) => {
                        return <TableRow style={{'alignItems':'center'}}>
                            <TableCell style={{"textAlign":"center"}}><Checkbox onChange={function(e){
                                const selected = this.state.options
                                let cancel

                                if(e.target.checked){
                                    selected.push(index)
                                }

                                else{
                                    cancel = selected.indexOf(index)
                                    selected.splice(cancel,1)
                                }
                                this.setState({
                                    options: selected
                                })
                            }.bind(this)}></Checkbox></TableCell>
                            <TableCell style={{"textAlign":"center"}}>{item.fields.course_year}</TableCell>
                            <TableCell style={{"textAlign":"center"}}>{item.fields.course_semester}</TableCell>
                            <TableCell style={{"textAlign":"center"}}>{item.fields.course_colgnm}</TableCell>
                            <TableCell style={{"textAlign":"center"}}>{item.fields.course_sustnm}</TableCell>
                            <TableCell style={{"textAlign":"center"}}>{item.fields.course_pobjnm}</TableCell>
                            <TableCell style={{"textAlign":"center"}}>{item.fields.course_sbjtclss}</TableCell>
                            <TableCell style={{"textAlign":"center"}}>{item.fields.course_clssnm}</TableCell>
                            <TableCell style={{"textAlign":"center"}}>{item.fields.course_pnt}</TableCell>
                            <TableCell style={{"textAlign":"center"}}>{item.fields.course_remk}</TableCell>                                
                        </TableRow>}
                    )}

        <Button variant="contained" color="primary" size='large' onClick={this._delete.bind(this)}>delete</Button?
    );
}

状态改变点有问题吗？

标签： reactjs