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

我正在使用此函数从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>

然后这样叫：

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

x

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

---

有人能帮忙吗？

为了解决这个问题，最好能看到应用程序的完整源代码。由于我看不到全貌，所以我引入了一个管理组件状态的非常简单的示例，其中关键播放器是一个方法，它从由其索引保存的集合中删除元素，这与代码片段中的非常类似

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;

import React，{Component}来自'React'；
从“lodash”导入*as uuu；
类内容扩展组件{
状态={
产品：[{id:1，名称：'some name'}，
{id:2，名称：'其他名称'}，
{id:3，name:'someothername 2'}，
{id:4，name:'其他东西'}，
{id:5，name:'other stuff 1'}，
{id:6，name:'other stuff 2'}
];
}
建造师（道具）{
超级（道具）；
}
移除产品（索引）{
const products=this.state.products；
_.pullAt（产品、指数）；
this.setState（{products:products}）；
}
render（）{
const{products}=this.state；
返回(
{products.map（n=>{
返回(
{n.name}this.removeProduct（products.indexOf（n））}>删除项
);
})}
);
}
}
导出默认内容；

为了解决这个问题，最好能看到应用程序的完整源代码。由于我看不到全貌，所以我引入了一个管理组件状态的非常简单的示例，其中关键播放器是一个方法，它从由其索引保存的集合中删除元素，这与代码片段中的非常类似

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;

import React，{Component}来自'React'；
从“lodash”导入*as uuu；
类内容扩展组件{
状态={
产品：[{id:1，名称：'some name'}，
{id:2，名称：'其他名称'}，
{id:3，name:'someothername 2'}，
{id:4，name:'其他东西'}，
{id:5，name:'other stuff 1'}，
{id:6，name:'other stuff 2'}
];
}
建造师（道具）{
超级（道具）；
}
移除产品（索引）{
const products=this.state.products；
_.pullAt（产品、指数）；
this.setState（{products:products}）；
}
render（）{
const{products}=this.state；
返回(
{products.map（n=>{
返回(
{n.name}this.removeProduct（products.indexOf（n））}>删除项
);
})}
);
}
}
导出默认内容；

您需要从您的篮子物品（或按钮所在的任何位置）将唯一标识符提升到

removeProduct

功能。我假设

removeProduct

位于BasketItem的父项中的某个位置

单击按钮时，将调用BasketItem的onRemoveProduct。这反过来调用它的道具和项目的id。然后，RemoveProduct上的父级（篮子）知道要移除篮子的产品

请参阅下面的代码

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

例如： *有3个项目的索引和键=（0,1,2）

• React渲染3个项目

• 删除第二项（key=1），然后array.map再次出现

• 它返回键为=（0,1）的2项

• React会看到项目已更改，并且缺少键为2的项目（最后一个项目）

• 第2项（最后一项）被移除，前两项保留在原位

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
产品：[
{
id:0，
名称：“产品1”
},
{
id:1，
名称：“产品2”
},
{
id:2，
名称：“产品3”
}
]
};
this.handleRemoveProduct=this.handleRemoveProduct.bind（this）；
}
HandlerRemoveProduct（e）{
const products=this.state.products.filter（prod=>prod.id！==e）
this.setState（{products}）
}
render（）{
返回(

{this.state.products.map（（产品，索引）=>{
返回(
);
})}

);
}
}
类BasketItem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onRemoveProduct=this.onRemoveProduct.bind（this）；
}
onRemoveProduct（e）{
e、 预防默认值（）；
this.props.onRemoveProduct（this.props.product.id）
}
render（）{
返回(

{this.props.product.name}
X

);
}
}
ReactDOM.render（，document.getElementById（“根”）；

从您的BasketItem（或按钮所在的位置），您需要将唯一标识符提升到

removeProduct

功能。我假设

removeProduct

位于BasketItem的父项中

单击该按钮时，将调用BasketItem的onRemoveProduct。这反过来会使用项目的id调用它的道具。onRemoveProduct的父级（篮子）将知道要移除篮子的产品

请参阅下面的代码

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

例如： *有3个项目的索引和键=（0,1,2）

• React渲染3个项目

• 删除第二项（key=1），然后array.map再次出现

• 它返回键为=（0,1）的2项

• Reac