Ein besserer Weg in React, um eine Eigenschaft in einem Array von Objekten zu aktualisieren

Question

Ich baue einen einfachen Einkaufswagen für eine Website und habe an der Aktion gearbeitet. Während ich arbeite habe ich das Gefühl, dass es wahrscheinlich eine einfachere, elegantere Art, es zu tun.

Dies ist der Ausgangszustand:

start_state = { 
    inventory: [ 
    {sku: "product_1", price: 600, name: "Product 1"}, 
    {sku: "product_2", price: 800, name: "Product 2"} 
    ], 
    cart: [] 
} 

Und die Endzustand gewünscht sind:

start_state = { 
    inventory: [ 
    {sku: "product_1", price: 600, name: "Product 1"}, 
    {sku: "product_2", price: 800, name: "Product 2"} 
    ], 
    cart: [ 
    {sku: "product_1", quantity: 2}, 
    {sku: "product_2", quantity: 1} 
    ] 
} 

Und dies ist die Funktion Im es vom Ausgangszustand zu neuem End_Zustand zu nehmen Auslösung, Das sku Argument ist das Element aus dem Status, der übergeben wird, wenn die Aktion aufgerufen wird:

Answer 1

Da Sie ES6 verwenden, können Sie einige der neuen Features wie findIndex und Object.assign verwenden, um zu erreichen, was Sie wollen.

addToCart: function(product) { 
     let index = this.state.cart.findIndex((x) => x.sku === product.sku); 
     if(index === -1) { 
      let newProduct = {sku: product.sku, quantity:1} 
      this.setState({cart : this.state.cart.concat([newProduct])}) 
     } 
     else { 
      let newCart = Object.assign([], this.state.cart); 
      newCart[index].quantity = newCart[index].quantity+1; 
      this.setState({cart: newCart}); 
     } 
} 

full working example

Answer 2

Ich denke, das ist viel besser:

function getCardWithIncItem(currentCart, itemInCart) { 
    return [ 
     ...currentCart.slice(0, itemInCart), 
     Object.assign({}, currentCart[itemInCart], { 
      quantity: currentCart[itemInCart].quantity + 1, 
     }), 
     ...currentCart.slice(itemInCart + 1), 
    ]; 
} 

function getCardWithNewItem(currentCart, sku) { 
    return [ 
     ...currentCart, { 
      sku: sku, 
      quantity: 1, 
     } 
    ]; 
} 

const currentCart = this.state.cart; 
const itemInCart = _.findIndex(currentCart, ['sku', sku]); 
const newCart = (itemInCart !== -1) 
    ? getCardWithIncItem(currentCart, itemInCart) 
    : getCardWithIncItem(currentCart, sku); 
this.setState({ 
    cart: newCart, 
})