web-dev-qa-db-ja.com

反応中の状態配列からアイテムを削除

ストーリーは、ボブ、サリー、ジャックを箱に入れることができるはずです。どちらも箱から取り出すこともできます。取り外すと、スロットは残りません。

people = ["Bob", "Sally", "Jack"]

私は今、 "Bob"を削除する必要があります。新しい配列は次のようになります。

["Sally", "Jack"]

これが私の反応コンポーネントです。

...

getInitialState: function() {
  return{
    people: [],
  }
},

selectPeople(e){
  this.setState({people: this.state.people.concat([e.target.value])})
},

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
},

...

ここに私はあなたにそれがもっとあるのであなたに最小限のコードを示す（onClickなど）。重要な部分は、配列から "Bob"を削除、削除、破棄することですが、removePeople()は呼び出されても機能しません。何か案は？私は これを見て でしたが、私はReactを使っているので私は何か悪いことをしているかもしれません。

javascriptarraysreactjs
67
Sylar

配列から要素を削除するには、次のようにします。

array.splice(index, 1);

あなたの場合：

removePeople(e) {
  var array = [...this.state.people]; // make a separate copy of the array
  var index = array.indexOf(e.target.value)
  if (index !== -1) {
    array.splice(index, 1);
    this.setState({people: array});
  }
},
89
MarcoS

Reactを使うときは、状態を直接変更してはいけません。オブジェクト（またはArray、これもオブジェクトです）が変更された場合は、新しいコピーを作成する必要があります。

他の人たちはArray.prototype.splice()を使うことを提案しましたが、そのメソッドはArrayを変更するので、Reactと一緒にsplice()を使わない方が良いです。

新しい配列を作るのにArray.prototype.filter()を使うのが最も簡単です：

removePeople(e) {
    this.setState({people: this.state.people.filter(function(person) { 
        return person !== e.target.value 
    })});
}
107
iaretiga

ES6を使用したAleksandr Petrov氏の回答のちょっとした変化

removePeople(e) {
    let filteredArray = this.state.people.filter(item => item !== e.target.value)
    this.setState({people: filteredArray});
}
24
Dmitry

.spliceを使って配列から項目を削除します。 deleteを使用すると、配列のインデックスは変更されませんが、特定のインデックスの値はundefinedになります。

splice（） メソッドは、既存の要素を削除したり新しい要素を追加したりすることによって配列の内容を変更します。

構文：array.splice(start, deleteCount[, item1[, item2[, ...]]])

var people = ["Bob", "Sally", "Jack"]
var toRemove = 'Bob';
var index = people.indexOf(toRemove);
if (index > -1) { //Make sure item is present in the array, without if condition, -n indexes will be considered from the end of the array.
  people.splice(index, 1);
}
console.log(people);
7
Rayon

最初に値を定義するのがとても簡単です

state = {
  checked_Array: []
}

今、

fun(index) {
  var checked = this.state.checked_Array;
  var values = checked.indexOf(index)
  checked.splice(values, 1);
  this.setState({checked_Array: checked});
  console.log(this.state.checked_Array)
}
0
QC innodel
remove_post_on_list = (deletePostId) => {
    this.setState({
      postList: this.state.postList.filter(item => item.post_id != deletePostId)
    })
  }
0
ANKIT-DETROJA
   removePeople(e){
    var array = this.state.people;
    var index = array.indexOf(e.target.value); // Let's say it's Bob.
   array.splice(index,1);
  }

Redfer doc 詳細情報

0
Gops AB

setStateの使用を忘れました。例：

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
  this.setState({
    people: array
  })
},

しかし、filterを使用する方が配列を変更しないため、より適切です。例：

removePeople(e){
  var array = this.state.people.filter(function(item) {
    return item !== e.target.value
  });
  this.setState({
    people: array
  })
},
0
Aleksandr Petrov

チャンススミスが言ったように配列を変異させたようにした 'splice'の使用についていくつかの回答が言及しました。元の配列のコピーを作成するメソッド呼び出し 'slice' （ 'slice'のドキュメントはこちら） を使用することをお勧めします。

0
Arthur Chen