javascript - 数组中对象的 setState

Question

鉴于我的状态看起来是这样的:

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

如何setState 该特定对象的 quantity 属性？

Answer 1

您可以获取 indexOf 购物车中您要更新的商品，并使用该商品之前的所有内容更新 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>
    );
  }
}