Удалить сопоставленный элемент, щелкнув по React

Question

В моем состоянии у меня есть массив, который я сопоставил в render функции:

Состояние

this.state = {
        newItem: {
            name: "",
            amount: 0
        },
        products: [
            {
                name: "Item",
                amount: 5
            },
            {
                name: "Item",
                amount: 5
            },
            {
                name: "Item",
                amount: 5
            }
        ]
    }

Я хочу удалить элемент из массивапродукты, нажав на кнопку этого элемента.Но то, что я пытался сделать, все терпит неудачу.Я много искал и нашел логически самое распространенное решение, но оно тоже не сработало.Вот функция удаления:

Функция удаления

delete(e) {
  this.setState(prevState => ({ products: prevState.products.filter((product) => {
      return product !== e.target.value
  })}))
  console.table(this.state.products)
}

Отображенный код JSX

            {
                this.state.products.map((item, index) => {
                    return(
                        <div key={index}>
                            <input readOnly value={this.state.products[index].name} type="text" />
                            <button disabled>-</button>
                            <input readOnly value={this.state.products[index].amount} type="number" />
                            <button disabled>+</button>
                            <button onClick={(e) => this.delete(e)}>Delete</button>
                        </div>
                    )
                })
            }

Answer 1

Вам нужно передать индекс этого элемента в delete, который будет удален, как показано ниже.

<button onClick={() => delete(index)}>Delete</button>

Затем вы можете легко удалить этот элемент.

delete = index => {
  this.setState(prevState => 
    ({
        products: prevState.products.filter((product, i) => i !== index)
    })
  );
}

Answer 2

Обратите внимание, что setState является асинхронным , поэтому использование console.log(this.state.products) сразу после вызова setState не будет печатать обновленные продукты.Вы можете передать обратный вызов во втором параметре setState, он будет выполнен после завершения setState.

Другая проблема связана с функцией delete.Вы используете e.target.value, которая является пустой строкой, потому что кнопка не имеет значения.

Это можно исправить с помощью следующего кода:

delete(product) {
  this.setState(prevState => ({
    products: prevState.products.filter(p => p !== product)
  }), 
  () => console.log(this.state.products));
}

В коде JSX я передаюпроизведение в первом аргументе функции delete:

{
  this.state.products.map((product, index) => (
    <div key={index}>
      <input readOnly value={product.name} type="text"/>
      <button disabled>-</button>
      <input readOnly value={product.amount} type="number"/>
      <button disabled>+</button>
      <button onClick={() => this.delete(product)}>Delete</button>
    </div>
  ))
}

Answer 3

вот решение и рабочий пример здесь https://codesandbox.io/s/dawn-tdd-js8yz

state = {
    newItem: {
        name: "",
        amount: 0
    },
    products: [
        {
            name: "Item1",
            amount: 5
        },
        {
            name: "Item2",
            amount: 5
        },
        {
            name: "Item3",
            amount: 5
        }
    ]
}

  delete(e: any) {
    
    var products = this.state.products.filter((product) => {
      return product.name !== e.name
    });

    console.log(products)

    this.setState({products: products})
    console.table(this.state.products)
  }

  render() {
    const { products } = this.state;
    return (
      <>
      {products.map((x, index) => {
        return <div key={index}>
        <input readOnly value={this.state.products[index].name} type="text" />
        <button disabled>-</button>
        <input readOnly value={this.state.products[index].amount} type="number" />
        <button disabled>+</button>
        <button onClick={this.delete.bind(this, x)}>Delete</button>
    </div>
      })}
      </>
    )
  }

Answer 4

Упрощенный пример того, как сделать отдельные кнопки в отображаемом списке:

delete = (id) => {
  this.setState(products: this.state.products.filter((item, index) => index !== idx));
}