使用react写一个例子，关于checkbox状态总是更新错误

Question

下面为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="请添加事件" 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="已完成显示开关" className="in" onClick={this.hideandshow.bind(this)}/>
        <input type="button" value="清除已完成" className="in" onClick={this.removeAll.bind(this)}/>
      </div>
    );
  }
}

export default App;

现在的问题是当添加的元素为下图时

点击第二个元素的删除，调用delate函数则会出现下图的结果

但是输出state中的alll元素都是正常的，但是页面选中状态的checkbox会向下移动一个，各位大神有知道为什么的吗？

Answer 1

defaultChecked改成checked