我有一个简单的学生对象列表,其中包含姓名和状态分数.
他们的名字绑定到< 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"));
这是因为你使用key = {index}而不是学生唯一的值.
当数组被修改后,删除索引后的学生将使用错误的密钥,并且React将不会注册密钥更改以使用更新的数据重新呈现.
你应该改用这样的东西……
<div key={student.name}>
假设student.name是唯一的.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。