1

Никак не могу понять, почему при использовании 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});
}

1 ответ 1

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

1
  • 1
    Спасибо за помощь.
    – Spike
    2 мар 2021 в 11:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.