reactjs - 删除项目后 react 列表呈现错误数据

我有一个简单的学生对象列表，其中包含名称和状态得分。

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

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

每当我想从此列表中删除第一个学生时，
通过调用set状态重新渲染组件

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

这是我的代码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"));

最佳答案

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

修改数组后，删除索引后的学生将具有错误的密钥，React将不会注册密钥更改以使用更新的数据重新呈现。

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

<div key={student.name}>

假设student.name是唯一的。

关于reactjs - 删除项目后 react 列表呈现错误数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43642351/