Как правильно реализовать удаление элемента из массива?

Question

[Алексей Милютин]

Здравствуйте, имею подобную реализацию, однако она работает некорректно (удаляется не конкретный элемент в списке):

render() {
    return (
      <div className="container">
        <div className="app">
          <div className="top-container">
          <div className="name">Todo List</div>
          <InputArea changeState={this.changeState}/>
          <input className="clear_button" type="button" value="Clear" onClick={this.handleClear}/>
          </div>
          <TodoList closed={this.handleClose} text={this.state.text}/>
        </div>
      </div>
    )
  }

  handleClose = (index) => {
    console.log(index);
    this.setState({
      text: [this.state.text.splice(index, 1)]
    })
  }

дочерний компонент:

render() {
    return (
      <div>
        <ul className="todoList_container">
          {this.props.text.map((text, i) => {
            return <div key={i} className="li" >
              <li>{text}</li>
              <i onClick={()=> {this.props.closed(i)}} className="fas fa-times-circle close-btn"></i>
              </div>
          })}
        </ul>
      </div>
    )
  }

Answer 1

[Владимир Проскурин]

А зачем тут фигурные скобки?

this.setState({
      text: [this.state.text.splice(index, 1)]
    })

так вы получите массив, в котором будет один элемент - массив (с которого вы удалили элемент).

Comments

[Алексей Милютин]

Не совсем вас понял. метод splice удаляет начиная с нужного индекса 1 элемент, и по идее в text должен быть массив с удаленным элементом. Разве нет?

[Владимир Проскурин]

Не, смотрите, есть у вас массив
const a = [1,2,3]
и вы хотите удалить у него нулевой элемент, то вы делаете вот так
const b = a.splice(0, 1);
и теперь в a хранится [2,3], а вот в b хранится удаленный элемент, а не новый массив (в котором нет удаленного элемента). К тому же, как я выше писал, вы пишите вот так
const c = [a.splice(0, 1)];
на выходе вы получите [[1]] - да, именно двойные квадратные скобки, т.к. splice возвращает [1], и вы еще сами добавили квадратные скобки, и получили массив в массиве.

[Алексей Милютин]

Владимир Проскурин, Спасибо большое!
Переписал функционал вот так.

handleClose = (index) => {
    console.log(index);
    const array = this.state.text;
    array.splice(index, 1);
    this.setState({
      text: [...array]
    })
  }

[Ghostly]

Алексей Милютин, тогда уж лучше так:

handleClose = (index) => {
  this.setState(({ text: prevText }) => ({
    text: [...prevText.slice(0, index), ...prevText.slice(index + 1)]
  }));
}

Здесь вы не копируете массив в отдельную переменную, а напрямую изменяете state:

const array = this.state.text;
array.splice(index, 1);

Объекты: передача по ссылке

Также используйте функцию при изменении состояния на основе предыдущего, так как setState «не всегда обновляет компонент сразу, он может группировать или откладывать обновление до следующего раза».

Документация
Примеры