将项目添加到篮式过滤器与Splice ReactJS Javascript

Add Item to Basket Filter vs Splice ReactJS Javascript

本文关键字：Splice ReactJS Javascript 过滤器 项目 添加      更新时间：2024-05-04

我是一个应用程序，在这里我作为用户可以将productItem添加到篮中。目前，如果用户从购物篮中删除项目，我将使用.filter从我的basketItems数组中删除basketItem对象。然后，我将State设置为这个带有筛选项的数组。

removeItem(msg, data) {
    let newStateItems = this.state.items.filter((i) => i.id != data.id); 
    this.setState({
        items: newStateItems
    });
    this.calculateTotals();
}

然而，问题是，一旦我删除了一个项目，然后再添加另一个项目时，创建的新项目就会显示为旧项目，直到页面刷新为止——这个应用程序的示例可以在这里找到，完整的存储库在github上。

添加项目调用如下所示：

addItem(msg, data) {
    this.state.items.push(data);
    this.setState({
        items: this.props.items
    })
    this.calculateTotals();
}

如何确保购物篮中显示正确的商品？

好吧，我想你有两个问题：

  1. 您正在同步调用calculateTotals，即在状态对象更新之前
  2. 您正在将状态设置为this.props.items

我建议如下：

removeItem(msg, data) {
    let newStateItems = this.state.items.filter((i) => i.id != data.id); 
    this.setState({
        items: newStateItems
    }, this.calculateTotals);
}

和

addItem(msg, data) {
    let newStateItems = this.state.items.concat([data]); 
    this.setState({
        items: newStateItems
    }, this.calculateTotals);
}

注意this.calculateTotals现在是如何发送到setState的，然后setState在更新状态后调用它，而且addItem使用修改后的列表设置状态，而不是像以前那样使用道具（我认为这是一个小的拼写错误，但它可能起了作用）。

以下是设置状态的文档：https://facebook.github.io/react/docs/component-api.html#setstate

相关文章：