Reakcja - usunięcie ze środka listy powoduje usunięcie ostatniego elementu.

Question

Pracuję nad prostą aplikacją do ćwiczenia w React. Mam cztery komponenty: główny komponent, który przechowuje użytkowników jako obiekty w tablicy, komponent userView, który renderuje informacje o każdym użytkowniku, komponencie userList, który renderuje wszystkie widoki użytkownika, oraz komponent addUser, który dodaje nowego użytkownika do głównego komponentu podczas przesyłania. Dodawanie i edycja pozycji na liście działa poprawnie. Występuje jednak problem z usunięciem. Każdy element listy ma swój własny przycisk usuwania, który powinien usunąć ten element, ale bez względu na to, który przycisk usuwania zostanie użyty, ostatni element na liście zostanie usunięty. Usuwam z tablicy zawierającej użytkowników w Main przy użyciu splice, i sprawdziłem, czy łączenie jest przekazywane prawidłowego indeksu po naciśnięciu przycisku usuwania.

Myślę, że ma to coś wspólnego z kluczami na komponentach, gdy wirtualny DOM ponownie się uruchamia, ale próbowałem dodawać klucze za pomocą kilku różnych metod (component.id, globalna zmienna licznika, indeks w tablicy) i nadal nie miał szczęścia. Oto odpowiednie fragmenty kodu (Zostawiłam tyle na zewnątrz, jak to możliwe dla zwięzłość):

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

Wyszedłem na zewnątrz sporo, oto cała moja React kod ryba: http://jsfiddle.net/dpdbv731/. Zasadniczo po kliknięciu komponentu userView wywoływana jest funkcja removeUser w menu głównym z indeksem tego komponentu jako parametrem. Czy ktoś może zobaczyć, gdzie idę źle?

Answer 1

Klucz na UserView jest niezdefiniowana - nie ma id pole na użytkownik. Powoduje to powrót React do używania indeksu tablicy jako klucza. Teraz, gdy usuniesz pozycję 0 z listy 2 elementów, pozostanie jeden składnik, który ma klawisz "0". Podczas uzgadniania, React skojarzy pozostały element przekazany jako rekwizyt z komponentem , który poprzednio miał klucz "0". Innymi słowy, poprawny element tablicy jest przekazywany, ale jest powiązany z niewłaściwym komponentem, a ponieważ ten komponent zawiera pewien stan, wygląda na to, że usunięto niewłaściwy element. Ponieważ indeks jest unikalny dla każdego użytkownika w twoim przykładzie, możesz zaradzić temu problemowi, dodając klucz = {user.index} do UserView.