Reagieren - Löschen von der Mitte der Liste entfernt das letzte Element statt

Question

Ich arbeite an einer einfachen Praxis-App in React. Ich habe vier Komponenten: eine Hauptkomponente, die Benutzer als Objekte in einem Array speichert, eine userView-Komponente, die die Informationen jedes Benutzers darstellt, eine userList-Komponente, die alle userViews rendert, und eine addUser-Komponente, die einen neuen Benutzer zur Hauptkomponente hinzufügt. Hinzufügen und Bearbeiten von Elementen in der Liste funktioniert ordnungsgemäß. Allerdings habe ich ein Problem mit dem Löschen. Jedes Listenelement verfügt über eine eigene Löschschaltfläche, die dieses Element löschen sollte. Unabhängig davon, welche Löschschaltfläche verwendet wird, wird das letzte Element in der Liste gelöscht. Ich lösche aus dem Array mit den Benutzern in Main mit Spleiß, und ich habe überprüft, dass Spleiß den richtigen Index übergeben wird, wenn eine Schaltfläche zum Löschen gedrückt wird.

Ich denke, das hat etwas mit Schlüsseln auf den Komponenten zu tun, wenn das virtuelle DOM rerders, aber ich habe versucht, Schlüssel mit ein paar verschiedenen Methoden (component.id, globale Zählervariable, Index im Array) und noch hatte kein Glück. Hier werden die relevanten Teile des Codes (ich habe der Kürze halber so viel aus wie möglich nach links):

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

ich ziemlich viel weggelassen, hier ist der gesamte Code in einer Geige Reagieren meine: http://jsfiddle.net/dpdbv731/. Wenn eine userView-Komponente angeklickt wird, ruft sie im Wesentlichen die removeUser-Funktion von Main mit dem Index dieser Komponente als Parameter auf. Kann jemand sehen, wo ich falsch liege?

Answer 1

Der Schlüssel auf Userview ist nicht definiert - es keine id Feld auf Benutzer. Dies führt dazu, dass React darauf zurückgreift, den Array-Index als Schlüssel zu verwenden. Wenn Sie jetzt den Eintrag 0 in einer Liste mit zwei Elementen entfernen, wird eine Komponente übrig bleiben, die den Schlüssel "0" hat. Während der Abstimmung verknüpft React das verbleibende Element, das als Props übergeben wurde, mit der Komponente , die zuvor den Schlüssel "0" hatte. Mit anderen Worten, das korrekte Array-Element wird übergeben, aber es ist mit der falschen Komponente verknüpft, und da diese Komponente einen Zustand enthält, sieht es so aus, als ob das falsche Element entfernt wurde. Da der Index in Ihrem Beispiel für jeden Benutzer eindeutig ist, können Sie dieses Problem beheben, indem Sie key = {user.index} zu UserView hinzufügen.