История в том, что я смогу поместить Боба, Салли и Джека в коробку. Я тоже могу удалить из коробки. При снятии слота не остается.

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 и т. Д.). Ключевой частью является удаление, удаление, уничтожение «Боба» из массива, но removePeople () не работает при вызове. Любые идеи? Я смотрел на этот, но, возможно, я делаю что-то не так, поскольку использую React.

Sylar

Ответов: 15

Ответы (15)

Чтобы удалить элемент из массива, просто выполните:

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

Очень просто Сначала вы определяете значение

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

Используйте .splice, чтобы удалить элемент из массива. Используя delete, индексы массива не будут изменены, но значение конкретного индекса будет undefined

Метод splice () изменяет содержимое массива, удаляя существующие элементы и / или добавляя новые элементы.

Синтаксис: array.splice (start, deleteCount [, item1 [, item2 [, ...]]])

var people = ["Боб", "Салли", "Джек"]
var toRemove = 'Боб';
var index = people.indexOf (toRemove);
if (index> -1) {// Убедитесь, что элемент присутствует в массиве, без условия if, -n индексы будут считаться с конца массива.
  people.splice (индекс, 1);
}
console.log (люди);

Изменить:

As pointed out by justin-grant, As a rule of thumb, Never mutate this.state directly, as calling setState() afterward may replace the mutation you made. Treat this.state as if it were immutable.

Альтернативой является создание копий объектов в this.state и управление копиями, назначение их обратно с помощью setState ().Можно использовать Array # map, Array # filter и т. Д.

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

Простое решение с использованием среза без изменения состояния

const [items, setItems] = useState(data);
const removeItem = (index) => {
  setItems([
             ...items.slice(0, index),
             ...items.slice(index + 1)
           ]);
}

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

const [arr, setArr] = useState ([]);
const removeElement = (id) => {
    var index = arr.indexOf (идентификатор)
    if (index! == - 1) {
      setArr (oldArray => oldArray.splice (индекс, 1));
    }
}

filter - лучший способ изменить массив, не касаясь состояния.

Возвращает новый массив на основе условия.

В вашем случае фильтр проверяет условие person.id! == id и создает новый массив, исключающий элемент на основе условия.

const [people, setPeople] = useState(data);

const handleRemove = (id) => {
   const newPeople = people.filter((person) => person.id !== id);

   setPeople( newPeople);
 };


Не рекомендуется: Но вы также можете использовать индекс элемента для условия, если у вас нет идентификатора.

индекс! == itemIndex

const array = [...this.state.people];
array.splice(i, 1);
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);
}

Редфер doc для получения дополнительной информации

В некоторых ответах упоминается использование 'splice', которое, как сказал Ченс Смит, изменило массив. Я бы посоветовал вам использовать вызов метода "срез" (Документ для 'slice' находится здесь) которые делают копию исходного массива.

const [people, setPeople] = useState(data);

const handleRemove = (id) => {
   const newPeople = people.filter((person) => { person.id !== id;
     setPeople( newPeople );
     
   });
 };


const [randomNumbers, setRandomNumbers] = useState([111,432,321]);
const numberToBeDeleted = 432;

// Filter (preferred)
let newRandomNumbers = randomNumbers.filter(number => number !== numberToBeDeleted)
setRandomNumbers(newRandomNumbers);

//Splice (alternative)
let indexOfNumberToBeDeleted = randomNumbers.indexOf(numberToBeDeleted);
let newRandomNumbers = Array.from(randomNumbers);
newRandomNumbers.splice(indexOfNumberToBeDeleted, 1);
setRandomNumbers(newRandomNumbers);


//Slice (not preferred - code complexity)
let indexOfNumberToBeDeleted = randomNumbers.indexOf(numberToBeDeleted);
let deletedNumber = randomNumbers.slice(indexOfNumberToBeDeleted, indexOfNumberToBeDeleted+1);
let newRandomNumbers = [];
for(let number of randomNumbers) {
    if(deletedNumber[0] !== number)
        newRandomNumbers.push(number);
};
setRandomNumbers(newRandomNumbers);

Вы забыли использовать 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
  })
},

Но лучше использовать фильтр, потому что он не мутирует массив. Пример:

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

При использовании React никогда не следует изменять состояние напрямую. Если объект (или массив, который тоже является объектом) изменяется, вы должны создать новую копию.

Другие предлагали использовать 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

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

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

при удалении любых данных из базы данных и списка обновлений без вызова API, когда вы передаете удаленный идентификатор этой функции, и эта функция удаляет удаленные, записанные из списка

экспорт класса по умолчанию PostList расширяет компонент {
  this.state = {
      postList: [
        {
          id: 1,
          name: 'Все элементы',
        }, {
          id: 2,
          name: 'Товары в наличии',
        }
      ],
    }


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

2022 WebDevInsider