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

Question

我有一个简单的学生对象列表,其中包含姓名和状态分数.

他们的名字是必然的<b>{student.name}</b>,他们的分数是必然的

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

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

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

这里是我的代码,这里是jsbin中的mycode

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"));

Answer 1

这是因为你正在使用key={index}而不是学生独有的价值.

当数组被修改后,删除索引后的学生将使用错误的密钥,并且React将不会注册密钥更改以使用更新的数据重新呈现.

你应该改用这样的东西......

<div key={student.name}>

假设这student.name是独一无二的.