Почему мое соединение удаляет все, кроме первого, а не только указанное?

#javascript #arrays #reactjs #splice

#javascript #массивы #reactjs #соединение

Вопрос:

Для данного массива при запуске соединения удаляется все, кроме первой записи. Однако я ожидал бы, что будет удалена только выбранная запись. Я подозреваю, что это как-то связано с тем, как настроен мой i, но я не уверен, в чем проблема.

 removethisone = (i) => {this.setState(state=>({list: state.list.splice(i,1)}))}

    <ul>
    {this.state.list.map((entry, i)=><li key={i}><button onClick={this.removethisone}>{i 1}</button>{entry}</li>)}
    </ul>

1. Если вы используете splice, лучше пройти по списку в обратном порядке. Это означает, что в вашем случае напишите функцию с циклом for, который отсчитывает от длины массива до 0. В противном случае вы испортите следующие индексы.

2. Вы смотрели, что возвращает splice??? Код работает так, как ожидалось. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /…

Ответ №1:

Причина, по которой это происходит, заключается в том, что Array.splice метод возвращает удаленные элементы из массива.

Вам нужно сделать что-то вроде этого:

 removethisone = (i) => {
  this.setState(state => {
    const nextState = [ ...state.list ]
    nextState.splice(i, 1)

    return { list: nextList }
  })
}

Например, запустите приведенный ниже код, чтобы увидеть результат вывода:

 // This is what your code does
let numbers = [1, 2, 3, 4, 5];
let removedNumbers = numbers.splice(2, 1)
numbers = removedNumbers

console.log(numbers);
console.log(removedNumbers);

Ответ №2:

Ваш код работает точно так, как вы описали, потому что именно так работает splice.

Метод splice возвращает массив удаленных элементов. Вы сохраняете удаленные элементы обратно в состояние. Следовательно, почему вы получаете то, что удалили.

 removethisone = (i) => {
  this.setState(state => {
    const list = state.list;
    const removedElems = list.splice(i, 1);
    console.log(removedElems);
    return {
      list
    }
  })
}