Javascript 阵列拼接一次移除错误项目或多个项目

嗨，我知道这是一个非常基本的问题，但我的代码不想正常工作。我已尝试从存储在此.state中的数组中删除某些项，但该函数所做的操作与我预期的不同，有时它删除了错误的项，最近它开始一次删除多个项，是否有人可以查看我的代码并查看缺少的内容

  deleteProduct = async (index) => {
    this.setState({ loading: true, items: [] })
    let { cart } = this.state
    cart.splice(index, 1)
    console.log('deleted this > :', cart.splice(index, 1));
    this.setState({cart:cart})
    try {
      await AsyncStorage.setItem('cart', JSON.stringify(cart))
      this.setState({ cart: cart, loading: false })
      this.retrieveCart()
    } catch (error) {
      this.setState({ error: error })
      console.log(error.message)
    }
  }

我的数据是这样的

cart : Array [
  Object {
    "id": 195,
    "price": "69",
    "qty": 1,
  },
  Object {
    "id": 200,
    "price": "69",
    "qty": 1,
  },
  Object {
    "id": 201,
    "price": "110",
    "qty": 1,
  },
]

{ cart.map(item =>
    <CartItem
      key={item.id}
      data={item}
      onDelete={this.deleteProduct}
    />
)}

deleteProduct = async (deleteId) => {
  this.setState({ loading: true, items: [] })
  const cart = this.state.cart.filter( item => item.id !== deleteId )}
  this.setState({ cart })
  try {
    await AsyncStorage.setItem('cart', JSON.stringify(cart))
    this.setState({ loading: false })
    this.retrieveCart()
  } catch (error) {
    this.setState({ error: error, loading: false })
    console.log(error.message)
  }
}

---

我是否应该使用一种不同的方法，比如通过

id

来确定目标，因为索引的工作不太好

是的。始终且仅按item.id删除项目。不要使用拼接

---

另外，您现在正在删除多个项目，因为您将

cart.splice（index，1））

添加到了console.log语句中。不好

我要做的是更新代码以引用数据中唯一的内容（如

id

字段）。这不是必需的，但不太容易出错。我在这里使用

过滤器

，这样在状态转换之间就不会出现数组变异问题

this.setState( {cart: cart.filter( item => item.id !== deleteId )}

其中，

deleteId

是用户希望删除的实体的id

看起来像这样

cart : Array [
  Object {
    "id": 195,
    "price": "69",
    "qty": 1,
  },
  Object {
    "id": 200,
    "price": "69",
    "qty": 1,
  },
  Object {
    "id": 201,
    "price": "110",
    "qty": 1,
  },
]

{ cart.map(item =>
    <CartItem
      key={item.id}
      data={item}
      onDelete={this.deleteProduct}
    />
)}

deleteProduct = async (deleteId) => {
  this.setState({ loading: true, items: [] })
  const cart = this.state.cart.filter( item => item.id !== deleteId )}
  this.setState({ cart })
  try {
    await AsyncStorage.setItem('cart', JSON.stringify(cart))
    this.setState({ loading: false })
    this.retrieveCart()
  } catch (error) {
    this.setState({ error: error, loading: false })
    console.log(error.message)
  }
}

---

剪接突变阵列可能是避免这种情况的最佳方法。我会过滤你的数据

this.setState（{cart:cart.filter（item=>item.id！==deleteId）}）

。。。当前在此函数中，您将调用

splice

两次，一次用于应用删除，一次用于

控制台.log

。这样做的副作用是每次调用都会从数组中删除元素。array:：splice会在适当的位置对数组进行变异，因此在console.log中执行一次，然后再执行一次将在同一索引上执行两次。您还将改变state对象与新的clean对象引用。

this.setState（{cart:cart.splice（index，1}），

你试过这样做吗？@MenaiAlaEddine Aladdin，但这会将移除的物品放入购物车array@DrewReese听起来很公平，我没有意识到即使是console.log也会被执行是的，我已经尝试过了，但它不会删除任何东西。你能提供更多关于你的函数外观的细节吗？它不会删除你所做的任何事情我试过了？它确实有效，但不需要设置状态我试过了

wait AsyncStorage.setItem（'cart'，JSON.stringify（cart.filter（（item）=>item.id！==id）））

@usfslk我刚刚编辑了一个更完整的示例。由于您多次引用购物车，因此将其别名为一个变量是有意义的，然后再引用。如果您不需要

setState

太好了，您的代码将

cart

更新设置为状态，因此我假设它应该是这样的：）