Удалить элемент объекта из массива объектов - состояние реакции

Question

У меня есть массив объектов, сохраненных в состоянии с использованием React

this.state= {
  people: [
    {
      name: 'Tom',
      hobbies: ['dancing', 'swimming']
    }, {
      name: 'Dean',
      hobbies: ['playing', 'wondering']
    }, {
      name: 'Jack',
      hobbies: ['shooting', 'hiking']
    }, {
      name: 'Natalie',
      hobbies: ['rock', 'cats']
    }
  ]
};

Я хочу обновить состояние, удалив один конкретный элемент из хобби.Я попытался скопировать массив людей из состояния, затем выполнить итерацию каждого объекта person, затем каждого массива хобби, чтобы затем проверить, является ли элемент тем, который я хочу удалить, но мне не удалось его удалить, состояние не изменилось.Я попытался сопоставить его и затем отфильтровать.

Какой самый простой и быстрый способ сделать это?Я только начал изучать React, поэтому я хочу сделать это с помощью setTimeout.

На данный момент у меня есть только код для выбора случайного хобби из случайного человека.

setTimeout(() => {
      const randInst = Math.floor(Math.random() * this.state.people.length);
      const hobbyIndex = Math.floor(Math.random() * this.state.people[randInst].hobbies.length);

    }, 500);

Answer 1

Вы должны создать новый массив, а затем установить его как новое значение для people в состоянии.Одним из способов является использование функции Array.prototype.map .

Метод map () создает новый массив с результатами вызова предоставленной функции для каждого элемента вВызывающий массив.

Например, вы можете сделать это следующим образом:

const randomPersonIndex = Math.floor(Math.random() * this.state.people.length);
const randomHobbyIndex = Math.floor(Math.random() * this.state.people[randomPersonIndex].hobbies.length);

this.setState({
    people: this.state.people.map((person, index) => {
        if (randomPersonIndex !== index) {
            return person; // not person we are targeting, don't change it
        } else {
            return {
                ...person,
                hobbies: person.hobbies.filter((v, i) => i !== randomHobbyIndex),
            }
        }
    });
});

Я создал кодовые окна, чтобы продемонстрировать это для вас.Проверьте это здесь .