Question

我使用此功能从React

中的状态数组中删除一个项目

removeProduct(index) {
    this.setState(prevState => ({
        selectedProducts: update(prevState.selectedProducts, {$splice: [[index, 1]]}),
    }))
}

正如这样传递：

<Basket items={this.state.selectedProducts} removeItem={this.removeProduct.bind(this)}/>

<BasketItem product={product} key={index} remove={this.props.removeItem}/>

然后像这样调用：

<button onClick={props.remove.bind(this)}>x</button>

但它没有删除该特定项目。它只删除数组中的第一项。

有人可以帮忙吗？

Answer 1

从您的BasketItem（或按钮所在的位置），您需要将唯一标识符提升到removeProduct功能。我假设removeProduct位于BasketItem的父级中。

单击该按钮时，将调用BasketItem的onRemoveProduct。反过来，它会使用该项目的ID来调用它的道具。父母（篮子）onRemoveProduct然后知道要删除篮子的产品。

见下面的代码。

注意：不使用.map中的索引作为键。您需要在产品上使用一些识别项目。

实施例： *你有3项索引和密钥=（0,1,2）。

React呈现3个项目
删除第二项（key = 1），然后再次发生array.map。
它返回2项，键=（0,1）。
React看到项目已经更改，并且缺少key = 2（最后一项）的项目。
第2项（最后一项，已删除，前两项已到位。

＆＃13;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [
        {
          id: 0,
          name: "Product 1"
        },
        {
          id: 1,
          name: "Product 2"
        },
        {
          id: 2,
          name: "Product 3"
        }
      ]
    };
    this.handleRemoveProduct = this.handleRemoveProduct.bind(this);
  }

  handleRemoveProduct(e) {
    const products = this.state.products.filter(prod => prod.id !== e)
    this.setState({products})
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.products.map((product, index) => {
            return (
              <BasketItem
                key={product.id}
                product={product}
                onRemoveProduct={this.handleRemoveProduct}
              />
            );
          })}
        </ul>
      </div>
    );
  }
}

class BasketItem extends React.Component {
  constructor(props) {
    super(props);
    this.onRemoveProduct = this.onRemoveProduct.bind(this);
  }
  onRemoveProduct(e) {
    e.preventDefault();
    this.props.onRemoveProduct(this.props.product.id)
  }
  
  render() {
    return (
      <li>
        {this.props.product.name}
        <button onClick={this.onRemoveProduct}>X</button>
      </li>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

Answer 2

很高兴看到您的应用程序的完整源代码，以解决问题。由于我无法看到完整的图片，因此我提供了一个非常简单的管理组件状态的示例，其中关键播放器是一种方法，通过索引从状态保存的集合中删除元素 - 非常类似于代码中的元素片段。

import React, { Component } from 'react';
import * as _ from 'lodash';

class Content extends Component {

state = {
    products: [ {id: 1, name: 'some name'}, 
        { id: 2, name: 'some other name'},
        { id: 3, name: 'some other name 2'},
        { id: 4, name: 'other stuff'},
        { id: 5, name: 'other stuff 1'},
        { id: 6, name: 'other stuff 2'}
    ];
}

constructor(props) {

    super(props);
}

removeProduct(index) {
    const products = this.state.products;
    _.pullAt(products, index);
    this.setState({ products: products });
}

render() {
    const { products } = this.state;
    return (
        <div>
            {products.map(n => {
                return (
                    <div key={n.id}>
                        {n.name} <button onClick={(event) => this.removeProduct(products.indexOf(n))}>remove item</button>
                    </div>
                );
            })}
        </div>
    );
}
}

export default Content;

在React

2 个答案: