2016-04-12 30 views
0

Ben bir kullanıcı bir productItem bir Basket ekleyebilirsiniz bir uygulama duyuyorum. Şu anda kullanıcı sepetten bir öğeyi kaldırırsa, basketItem nesnesini basketItems dizimden kaldırmak için .filter kullanıyorum. Sonra filtre uygulanmış öğe ile bu diziye setState.Sepete Ekle Filtre vs Splice ReactJS Javascript

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

mesele ancak olduğuna ben bir öğe çıkarılır ve daha sonra başka Öğe, sayfa yenilenir kadar eski öğe olarak gösterir oluşturulan yeni Öğe eklemek gidin sonra - bu uygulama bulunabilir bir örnek here ve full repository github üzerindedir.

eklenti öğesi çağrısı

şuna benzer:

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

nasıl doğru madde sepetinde gösterir emin olabiliriz? Tamam

+0

belki bu https://jsfiddle.net/7og8ztLz/ –

+0

Kullanım 'tepki de concat' yerine' push' gibi madde şey eklemek gerekir: Burada

durumunu ayarlamak için dokümantasyon olduğunu. "push" değerleri değiştirir. Ancak React, değişmez verilerle çalışır (Değişken verilerle çalışır, ancak sizi sorunlara bakmak için tavsiye etmem). – iofjuupasli

cevap

0

, sana iki sorun var: Sen diyorsun

  1. calculateTotals eşzamanlı, durum nesnesi
  2. Sen this.props olmak durumuna göre ayarladığımız güncellenir yani önce

    :

aşağıdaki öneriyoruz .items

VE this.calculateTotals şimdi de o addItem sonra devlet güncellemeden sonra çağırır setstate, gönderilen fakat nasıl

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

Bildirim şimdi değiştirilmiş liste değil kullanılarak durumunu ayarlar Daha önce olduğu gibi () aksesuarı (bunun küçük bir yazım hatası olduğunu farz ediyorum, ancak muhtemelen katkıda bulundu). https://facebook.github.io/react/docs/component-api.html#setstate