Question

我是一个应用，用户可以在其中将productItem添加到购物篮。目前，如果用户从篮子中移除了一个项目，我正在使用.filter从我的basketItems数组中删除basketItem对象。然后我使用过滤项将setState设置为此数组。

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

然而问题是，一旦我删除了一个项目然后再添加另一个项目，创建的新项目将显示为旧项目，直到刷新页面为止 - 这个应用程序的示例可以找到{{3} } here在github上。

添加项目调用如下所示：

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

如何确保正确的项目显示在购物篮中？

Answer 1

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

您正在同步调用 calculateTotals ，即在状态对象更新之前
您将状态设置为 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

添加项目到篮子过滤器vs Splice ReactJS Javascript

1 个答案: