Видаліть елемент з масиву стану в реакції

Історія полягає в тому, що я повинен бути в змозі покласти Боба, Саллі та Джека в коробку. Я також можу вийняти або з коробки. Після вилучення слот не залишається.

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(), але цей метод мутує Array, тому краще не використовувати splice()з React.

Найпростіше використовувати Array.prototype.filter()для створення нового масиву:

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

Ось незначна зміна у відповіді Олександра Петрова за допомогою ES6

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

Використовуйте .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);

Редагувати:

Як вказує Justin-grant , як правило, ніколи не мутуйте this.stateбезпосередньо, оскільки дзвінок setState()після цього може замінити зроблену вами мутацію. Ставтесь this.stateтак, ніби це було непорушним.

Альтернативою є створення копій об'єктів this.stateі маніпулювання копіями, присвоєння їх назад за допомогою setState(). Array#map, І Array#filterт.д. можуть бути використані.

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

Простий спосіб видалення елемента з масиву стану реагувати:

коли будь-які дані видаляються із бази даних та списку оновлень без виклику API, коли ви передаєте видалений ідентифікатор цій функції, і ця функція видаляє видалені відновлені зі списку

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 документ для отримання додаткової інформації