Javascript 反应-从列表中间删除将删除最后一个元素

我正在React中开发一个简单的练习应用程序。我有四个组件：一个将用户存储为数组中的对象的主组件，一个呈现每个用户信息的userView组件，一个呈现所有userView的userList组件，以及一个在提交时向主组件添加新用户的addUser组件。在列表中添加和编辑项目可以正常工作。但是，我遇到了删除的问题。每个列表项都有自己的删除按钮，该按钮应删除该元素，但无论使用哪个删除按钮，都会删除列表中的最后一个元素。我正在使用splice从包含Main中用户的数组中删除，并且我已经检查了当按下delete按钮时splice是否传递了正确的索引

我认为这与虚拟DOM重新渲染时组件上的键有关，但我尝试使用几种不同的方法（component.id、全局计数器变量、数组中的索引）添加键，但仍然没有成功。以下是相关的代码片段（为了简洁起见，我尽量省略了）：

var Main=React.createClass({
getInitialState:函数（）{
返回{
诱惑者：[]
}
},
removeUser:函数（索引）{
log（'index to remove at:'，index）；//给出正确的索引
var newUsersArray=this.state.allUsers.slice（）；
剪接（索引，1）；
这是我的国家({
诱惑者：newUsersArray
});
},
render:function（）{
返回(
。基本上，当单击userView组件时，它会调用Main上的removeUser函数，并将该组件的索引作为参数。有人看到我的错误吗？
userView上的键未定义-用户上没有id字段。这会导致React退回使用数组索引作为键。现在，当您删除项0时在2元素列表中，将剩下一个组件，其键为“0”。在对账过程中，React将把作为道具传递的剩余元素与先前键为“0”的组件相关联。换句话说，传递了正确的数组元素，但它与错误的组件相关联，并且由于此组件包含某些状态，因此似乎删除了错误的项。由于在示例中，索引是每个用户唯一的，因此可以通过向UserView添加key={user.index}来解决此问题

var Main = React.createClass({
  getInitialState: function(){
    return {
      allUsers: []
    }
  },
  removeUser: function(index){
    console.log('index to remove at: ', index); //Gives correct index
    var newUsersArray = this.state.allUsers.slice();
    newUsersArray.splice(index, 1);
    this.setState({
      allUsers: newUsersArray
    });
  },
  render: function(){
    return (
      <div>
        <AddUser addNew={this.addUser} index={this.state.allUsers.length} />
        <UserList users={this.state.allUsers} edit={this.editUser} remove={this.removeUser} />
      </div>
  )
  }
})

  var UserList = React.createClass({
    render: function(){
      var users = this.props.users;
      var edit = this.props.edit;
      var remove = this.props.remove;
      return (
        <div>
        {users.map(function(user){
          return <UserView userName={user.name} userRoles={user.roles} editUser={edit} remove={remove} key={user.id} index={user.index}/>
    })}
       </div>
      );
    }
});

var UserView = React.createClass({
  handleDelete: function(){
    this.props.remove(this.props.index);
});