reactjs – 删除项目后反应列表呈现错误数据

他们的名字绑定到< b> {student.name}< / b>他们的分数必然会

<input type="text" defaultValue={student.score}/>

什么时候我想从这个列表中删除第一个学生
通过调用set state重新呈现组件

第二个学生的输入标签显示第一个学生的分数而不是自己的分数.为什么这会发生在我做错的地方？

这是我的代码here is mycode in jsbin

class App extends React.Component{
  constructor(){
    super();
    this.state ={
      students:[{name:"A",score:10},{name:"B",score:20},{name:"C",score:30}]
    }
  }

  onDelete(index){
    this.state.students.splice(index,1);
    this.setState(this.state);
  }

   render(){
     return(
       <div>
         {this.state.students.map((student,index)=>{
              return(
                <div key={index}>
                    <b>{student.name}</b> - <input type="text" defaultValue={student.score}/>
                     <button onClick={this.onDelete.bind(this,index)}>delete</button>
                </div>                
              )
         })}
       </div>
     )
   }
}


ReactDOM.render(<App/>,document.getElementById("main"));