反応の状態配列から項目を削除します

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

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

「ボブ」を削除する必要があります。新しい配列は次のようになります。

["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を使用しているため、何か間違っている可能性があります。

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

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

Reactを使用する場合は、状態を直接変更しないでください。オブジェクト（またはArrayオブジェクトでもある）が変更された場合は、新しいコピーを作成する必要があります。

他の人はの使用を提案しましたArray.prototype.splice()が、その方法は配列を変更するのでsplice()、Reactと一緒に使用しない方が良いでしょう。

Array.prototype.filter()新しいアレイを作成するために使用するのが最も簡単：

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

ES6を使用したAleksandr Petrovの応答のマイナーバリエーションを以下に示します。

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

.splice配列からアイテムを削除するために使用します。を使用するdeleteと、配列のインデックスは変更されませんが、特定のインデックスの値は変更されますundefined

スプライス（）メソッドは、既存の要素を除去し、および/または新たな要素を追加することによって、配列の内容を変更します。

構文： 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);

編集：

指すアウトとしてジャスティン・助成金、経験則として、絶対に変異していないthis.state呼び出しとして、直接setState()その後はあなたが作った突然変異を交換することができます。this.state不変であるかのように扱います。

もう1つの方法は、でオブジェクトのコピーを作成しthis.state、そのコピーを操作して、を使用してそれらに割り当てることsetState()です。Array#map、Array#filterなどを使用することができます。

this.setState({people: this.state.people.filter(item => item !== e.target.value);});

反応で状態配列からアイテムを削除する簡単な方法：

APIを呼び出さずにデータベースからデータを削除してリストを更新すると、削除されたIDがこの関数に渡され、この関数はリストから削除された削除済みのコアを削除します

export default class PostList extends Component {
  this.state = {
      postList: [
        {
          id: 1,
          name: 'All Items',
        }, {
          id: 2,
          name: 'In Stock Items',
        }
      ],
    }


    remove_post_on_list = (deletePostId) => {
        this.setState({
          postList: this.state.postList.filter(item => item.post_id != deletePostId)
        })
      }
  
}

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

値を定義するのは非常に簡単です

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

使用するのを忘れました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
  })
},

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 してください