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

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

Answer 1

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

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

1 个答案: