9
私はReactの簡単な練習アプリケーションを開発中です。私は、配列内のオブジェクトとしてユーザーを格納するメインコンポーネント、各ユーザーの情報をレンダリングするuserViewコンポーネント、すべてのuserViewをレンダリングするuserListコンポーネント、サブミット時にメインコンポーネントに新しいユーザーを追加するaddUserコンポーネントの4つのコンポーネントがあります。リスト内の項目の追加と編集は正しく機能します。しかし、私は削除の問題に遭遇しています。各リスト項目には、その要素を削除するはずの独自の削除ボタンがありますが、どの削除ボタンを使用しても、リストの最後の要素は削除されます。スプライスを使用しているメインのユーザーを含む配列から削除しています。削除ボタンを押したときにスプライスに正しいインデックスが渡されていることを確認しました。React - リストの途中から削除すると、代わりに最後の要素が削除されます
これは、仮想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関数を呼び出します。誰かが私が間違っているのを見ることができますか？