反应状态由setState方法分别更新

Question

我为解决这个问题花了好几个小时的时间，但似乎无法为我的问题找到合适的解决方案。-我确信这是一个普遍的问题，我仍在努力变得更强硬反应。

我确实有要创建的购物车。我正在从一个硬编码的json文件中调用项目列表。我的问题是我要在状态中保留两个不同的值，一个是用于商品的数量，每当购物车中的商品数量发生变化时，我就将其添加，而在我的商店购物车中，我只想存储ID数量和数量；

因此，例如，如果用户在item1上选择'3'数量，在item2上选择'2'数量，则我的状态应为{id：quantitiy}-> {1：3,2：2}，但它会覆盖较旧的陈述并更新例如它先存储1：3，然后2：2覆盖它。

我有办法解决这个问题吗？我也尝试过使用数组并使用传播运算符推送项目，但后来我意识到由于某些原因我确实有两个不同的状态，并且每个状态都保持其状态而不是一起更新购物车。

{
  "items": [
    {
      "id": 1,
      "description": "TV",
      "unit_price": 2,
    },
    {
      "id": 2,
      "description": "Computer",
      "unit_price": 12,
    }
  ]

}

而且我确实具有处理将新商品添加到购物车的组件

class Item extends Component {
  state = {
    quantity: 1,
    cart: {}
  };

  handleInput = event => {
    this.setState({
      ...this.state.quantity,
      [event.target.name]: event.target.value
    });
  };

  addToCart = id => {
    this.setState(prevState => ({
      cart: {
        [id]: this.state.quantity
      }
    }));
  };

  render() {
    const { item } = this.props;

    return (
      <div>
        <h3>Item: {item.description}</h3>
        <p>Price: {item.price}</p>
        <div>
          <button onClick={() => this.addToCart(item.id)}>Add To Cart</button>
          <input
            type="number"
            name="quantity"
            value={this.state.quantity}
            onChange={this.handleInput}
          />
        </div>
        <Link to={{ pathname: "/cart", state: { cart: this.state.cart } }}>
          View Cart
        </Link>
      </div>
    );
  }
}

export default Item;

Answer 1

我认为您想将先前的购物车状态传播到新的状态：

addToCart = id => {
  this.setState(prevState => ({
    cart: {
      ...(prevState.cart || {}) // keep previous cart state
      [id]: this.state.quantity
    }
  }));
};