从 React 中的数组中删除特定索引

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

很高兴看到您的应用程序的完整源代码，以解决问题。由于我看不到全貌，所以我提出了一个管理组件状态的非常简单的示例，其中关键角色是一种方法，该方法从其索引保持状态的集合中删除元素 - 与您的代码中的非常相似片段。

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;

Answer 2

从您的 BasketItem（或按钮所在的任何位置），您需要将唯一标识符提升到 removeProduct 函数。我假设 removeProduct 在 BasketItem.

的父项中的某处

单击按钮时，将调用 BasketItem 的 onRemoveProduct。这反过来又用项目的 id 调用它的道具。父级（购物车）onRemoveProduct 然后知道要删除购物车的产品。

请参阅下面的代码。

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

示例： * 你有 3 个项目，索引和键 = (0,1,2)。

React 渲染 3 个项目
您删除了第二项（键 = 1），然后 array.map 再次发生。
它 returns 2 个项目，键 = (0,1)。
React 发现项目已更改并且缺少 key = 2（最后一项）的项目。
第 2 项（最后一项已删除，前两项保留在原位。

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"));

<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>

从 React 中的数组中删除特定索引

Removing specific index from array in React

arrays

array-splice

reactjs