下面為app.js的代碼

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(){
    super();
    this.state={
      alll:[],
      values:''
    }
  }
  add(e){
    let arr1 = this.state.alll;
    arr1.push({msg:this.state.values,check1:false});
    this.setState({
      alll:arr1
    })
    console.log(this.state.alll);
  }
  change(e){
    this.setState({
      values:e.nativeEvent.target.value
    })
   
  }
  delate(e){
    let index1 = e.target.parentNode.id;
    let arr1 = [];
    for(var i =0;i<this.state.alll.length;i++){
      arr1.push(JSON.parse(JSON.stringify(this.state.alll[i])));
    }
    arr1.splice(index1,1);
    console.log(arr1);
    this.setState(
        {alll: arr1},
          () =>{
            alert(1);
   console.log(this.state.alll)
 }
    )
  }
  checktoggle(e){
    let index1 = e.target.parentNode.id;
    let arr1 = this.state.alll;
    arr1[index1].check1 = !arr1[index1].check1;
    this.setState({
      alll:arr1
    })
    console.log(this.state.alll);
  }
  hideandshow(e){

  }
  removeAll(){
    let arr1 = [];
    arr1 = this.state.alll;
    for(let i = arr1.length-1;i>0;i--){
      if(arr1[i].check1 === true){
        arr1.splice(i,1);
      }
    }
    this.setState({
      alll:arr1
    })
  }
  render() {
    var result = [];
    for(let i = 0;i<this.state.alll.length;i++){
            result.push(<div key={i} id={i}><input type="checkbox"  onClick={this.checktoggle.bind(this)} defaultChecked={this.state.alll[i].check1} name={i}/><span>{this.state.alll[i].msg}</span><input type="button" value="刪除" onClick={this.delate.bind(this)}  className="in" /></div>)
        }
    return (
      <div className="App">
      {this.state.values}
      
        <input type="text" placeholder="請?zhí)砑邮录? className="in" onChange={this.change.bind(this)} /> 
        <input type="button" value="添加" onClick={this.add.bind(this)}/>
        <ul ref="ul1">
        
          {result}
        
        </ul>
        <input type="button" value="已完成顯示開關(guān)" className="in" onClick={this.hideandshow.bind(this)}/>
        <input type="button" value="清除已完成" className="in" onClick={this.removeAll.bind(this)}/>
      </div>
    );
  }
}

export default App;

現(xiàn)在的問題是當(dāng)添加的元素為下圖時

點(diǎn)擊第二個元素的刪除，調(diào)用delate函數(shù)則會出現(xiàn)下圖的結(jié)果

但是輸出state中的alll元素都是正常的，但是頁面選中狀態(tài)的checkbox會向下移動一個，各位大神有知道為什么的嗎？