При удалении элемента через setState удаляется весь массив в React

Question

Никак не могу понять, почему при использовании splice удаляется весь массив. Возле каждого li есть кнопка, при нажатии на которую удаляется именно этот элемент li. Но удаляется весь массив.

class App extends React.Component {
constructor() {
    super();
    this.state = {arr: ['Коля', 'Вася', 'Петя', 'Иван', 'Дима']};
    this.addItem = this.addItem.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
}

deleteItem(index) {
   this.setState({arr: this.state.arr.splice(index, 1)});
}
    
render() {
    
    const list = this.state.arr.map((item, index) => {
        return <li key={index}>
            {item}
             <button onClick={this.deleteItem}>Delete me</button>
        </li>;
    });      

        
    
    return (
            <ul>
                {list}
            </ul>      
            
 
    );
}
}

Нашла решение, но правильно ли понимаю, что там непосредственно меняется state и так делать нельзя.

deleteItem(index) {
    this.state.items.splice(index, 1);
    this.setState({items: this.state.items});
}

Answer 1

Не используйте splice. Это изменит исходные данные.

Вы можете использовать filter. для создания новых данных. Пример:

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { arr: ['Коля', 'Вася', 'Петя', 'Иван', 'Дима'] }
    this.deleteItem = this.deleteItem.bind(this)
  }

  deleteItem(index) {
    this.setState({ arr: this.state.arr.filter((item, i) => index !== i) })
  }

  render() {
    const { arr } = this.state

    return (
      <ul>
        {arr.map((item, index) => (
          <li key={index}>
            {item}, {index}
            <button onClick={() => this.deleteItem(index)}>Delete me</button>
          </li>
        ))}
      </ul>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('mydiv'))

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<body>
<div id="mydiv"></div>
</body>

И вы должны пройти index: onClick={() => this.deleteItem(index)}.

БЛОГ НА HUSL

При удалении элемента через setState удаляется весь массив в React

Ответы (1 шт):