數組中對象的setState

Question

鑒於我的狀態如此：

cart: [
  { id: 1, name: 'apple', price: 100, quantity: 1 }
]

我如何setState特定對象的quantity財產？

Answer 1

您可以獲取indexOf您要更新的cart商品，並使用該商品，更新商品和其他商品更新cart 。

例

class App extends React.Component {
  state = {
    cart: [
      { id: 1, name: "apple", price: 100, quantity: 1 },
      { id: 2, name: "orange", price: 50, quantity: 10 },
      { id: 3, name: "banana", price: 20, quantity: 100 }
    ]
  };

  increaseQuantity = item => {
    this.setState(previousState => {
      const { cart } = previousState;
      const itemIndex = cart.indexOf(item);

      return {
        cart: [
          ...cart.slice(0, itemIndex),
          { ...cart[itemIndex], quantity: cart[itemIndex].quantity + 1 },
          ...cart.slice(itemIndex + 1)
        ]
      };
    });
  };

  render() {
    return (
      <div>
        {this.state.cart.map(item => (
          <div key={item.id} onClick={() => this.increaseQuantity(item)}>
            {item.name} {item.quantity}
          </div>
        ))}
      </div>
    );
  }
}

Answer 2

您可以將購物車更新為

updateCart(id, itemAttributes) {
  var index = this.state.cart.findIndex(x=> x.id === id);
  if (index === -1)
    // handle error
  else
    this.setState({
      cart: [
         ...this.state.cart.slice(0, index),
         Object.assign({}, this.state.cart[index], itemAttributes),
         ...this.state.cart.slice(index+1)
      ]
    });
}

然后使用您的購物車項目的ID調用您的updateCart函數

this.updateCart(1, {quantity: 2});

Answer 3

 this.setState(prev => ({
   cart: [{ ...prev.cart[0], quantity: 10, }].concat(prev.cart.slice(1))
 }));

復制數組並使用復制的版本替換要更改的對象。 如果您經常這樣做，您可以使用一些實用程序：

const replace = index, replacer) => arr =>
   arr.map((el, i) => i === index ? replacer(el) : el);
const key = (k, replacer)  => state => ({...state, [k]: replacer(state[k]) });

適用於：

this.setState(key(
   "cart", 
   replace(
     0, 
     key("quantity", () => 10)
   )
));