通过单击 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

这里是解决方案和工作示例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 3

请注意，setState 是异步，因此在调用setState 后立即使用console.log(this.state.products) 将不会打印更新的产品。你可以在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 4

如何在映射列表上制作特定于项目的按钮的简化示例：

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