0

есть функция deleteHandler, он принимает параметр index и хочу чтобы из state удалился значение ,как это сделать ?

import React, { Component } from 'react'; import './App.css'; import List from './List/List'

class App extends Component {

  state = {
    cars: [
      {name: 'Ford'},
      {name: 'Audi'},
      {name: 'Mazda'}
    ]
  }

  deleteHandler(index) {
    console.log(index);
  }

  render() {
    const divStyle = {
      textAlign: 'center'
    }

    return (
      <div style={divStyle}>

        { this.state.cars.map((car, index) => {
          return (
            <List
              key = {index}
              name = {car.name}
              onDelete = {this.deleteHandler.bind(this, index)}
            />
          )
        }) }
        <input type="text" />
        <button>Add</button>
      </div>
    );
  }
}

export default App;

1 ответ 1

1

Попробуйте следующий вариант:

 deleteHandler(index) {
    const { cars } = this.state;
    const newCars = cars.filter((car, idx) => idx !== index);
    this.setState({ cars: newCars });
 }

Во второй строке функции мы создаем новый массив машин путём фильтрации текущего массива, оставляя только те машины, индекс которых не равен аргументу deleteHandler. Например, если мы хотим удалить машину с индексом 2. Метод filter вернёт новый массив, в котором будут только те элементы массива cars, у которых индекс не равен двойке (idx !== index).

Подробнее про метод массива filter можно почитать тут.

6
  • 1
    работает , можете объяснить что тут написано const newCars = cars.filter((car, idx) => idx !== index);
    – user347690
    23 авг 2019 в 11:28
  • @SabaKoghuashvili да, конечно. Сейчас добавлю описание к ответу. 23 авг 2019 в 11:30
  • все понятно , спасибо
    – user347690
    23 авг 2019 в 11:36
  • можно укоротить - this.setState(prevState => ({cars: prevState.cars.filter((car, i) => i !== index});
    – raketa
    23 авг 2019 в 12:11
  • можно еще короче: this.setState(p => ({ cars: p.cars.filter((c, i) => i !== index)}); 23 авг 2019 в 14:40

Ваш ответ

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