React - 从列表中间删除会删除最后一个元素

Question

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

当虚拟DOM重新呈现时,我认为这与组件上的键有关,但我尝试使用几种不同的方法(component.id,全局计数器变量,数组中的索引)添加键,但仍然没有运气.以下是相关的代码片段(为了简洁起见我尽可能多地离开):

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

我遗漏了很多,这里是我的所有反应代码:http://jsfiddle.net/dpdbv731/.基本上,当单击userView组件时,它会调用Main上的removeUser函数,并将该组件的索引作为参数.谁能看到我哪里出错了？

Answer 1

UserView上的键未定义 - 用户没有id字段.这导致React回退到使用数组索引作为键.现在,当您删除2元素列表中的项目0时,将剩下一个组件,其中键为"0".在协调期间,React会将作为props传递的剩余元素与之前具有键"0"的组件相关联.换句话说,传递了正确的数组元素,但它与错误的组件相关联,并且由于此组件包含某些状态,因此看起来错误的项目被删除.由于该指数是你的榜样每个用户唯一的,你可以通过添加键= {} user.index来解决这个问题用户视图.