reactjs - 删除项目后 react 列表渲染错误数据

Question

我有一个简单的学生对象列表，其中包含姓名及其所在州的分数。

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

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

每当我想从此列表中删除第一个学生并且通过调用 set state 重新渲染组件。

第二个学生的输入标记显示第一个学生的分数，而不是拥有自己的分数。为什么我做错了会发生这种情况？？

Here is my code 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"));

Answer 1

这是因为您使用的是 key={index} 而不是学生独有的值。

当数组被修改时，删除索引后的学生将拥有错误的键，React 将不会注册键更改以使用更新的数据重新渲染。

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

<div key={student.name}>

假设student.name是唯一的。