添加到購物籃過濾器VS Splice ReactJS Javascript

我是一個應用程序，我可以添加一個productItem到籃子。目前，如果用戶從籃子中移除一個項目，我正在使用.filter從basketItems數組中刪除basketItem對象。然後，我使用過濾的項目將StateState設置爲該數組。添加到購物籃過濾器VS Splice ReactJS Javascript

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

問題不過是，一旦我已刪除的項，然後繼續添加其他項目，創建顯示爲舊項目，直到頁面被刷新，新的項目 - 一個例子這個程序可以發現here和full repository在github上。

該加載項調用看起來是這樣的：

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

我怎樣才能確保正確的項目顯示在籃下？

來源

2016-04-12 Tom Pinchen

也許你需要添加的項目是這樣的https://jsfiddle.net/7og8ztLz/ –

使用'在反應concat'代替'push'。 'push'突變值。但是React可以處理不可變數據（它可以處理可變數據，但我不建議你去查找問題） – iofjuupasli

好吧，我想你有兩個問題：

你打電話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

來源

2016-04-12 11:00:37

添加到購物籃過濾器VS Splice ReactJS Javascript

回答

相關問題