0

几个小时以来，我一直在摸索解决这个问题，但我似乎无法为我的问题找到合适的解决方案。 - 我确定这是一个常见问题，我仍在努力让 React 变得更强大。

我确实有一个正在尝试创建的购物车。我正在从硬编码的 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;
4

1 回答 1

0

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

addToCart = id => {
  this.setState(prevState => ({
    cart: {
      ...(prevState.cart || {}), // keep previous cart state
      [id]: this.state.quantity
    }
  }));
};
于 2020-01-26T06:12:09.857 回答