0

我是一个应用程序，用户可以在其中将 productItem 添加到 Basket。目前，如果用户从篮子中删除一个项目，我正在使用 .filter 从我的 basketItems 数组中删除 basketItem 对象。然后我用过滤后的项目将状态设置为这个数组。

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();
}

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

4

1 回答 1

0

好的，我认为你有两个问题：

  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 的，它在更新状态后调用它，而且addItem现在使用修改后的列表设置状态，而不是像以前那样使用道具（我认为这是一个小错字，但是它可能有所贡献）。

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

于 2016-04-12T11:00:37.363 回答