javascript - 购物车未在 React.js 中添加正确的项目

Question

我正在学习 React.js(而且我是 JavaScript 的初学者)，并且在让我的 addToCart 函数正常工作时遇到一些困难。我已设法显示所有产品，但将其中任何产品添加到购物车只会添加第一个商品，一旦该商品缺货，所有商品都会缺货。

我确信我遗漏了一些明显的东西，但我真的很感谢一些更有经验的人来关注我的代码。

Github repo for this app

以下是我的 FluxProduct.react.js 产品组件:

var React = require('react');
var FluxCartActions = require('../actions/FluxCartActions');

var FluxProduct = React.createClass({

  addToCart: function(event){
    var id = this.props.selected.id;
    var update = {
      name: this.props.product.name,
      category: this.props.selected.category,
      price: this.props.selected.price
    }
    FluxCartActions.addToCart(id, update);
    FluxCartActions.updateCartVisible(true);
  },

  render: function() {
    var self = this;
    var products = this.props.product;
    var stockAvailable = (this.props.selected.id in this.props.cartitems) ? this.props.selected.stock - this.props.cartitems[this.props.selected.id].quantity : this.props.selected.stock;
    return (
      <ul>
      {Object.keys(products).map(function(product){
      return (
        <li key={product}>
          <div className="flux-product">
            <img src={'img/' + products[product].image}/>
            <div className="flux-product-detail">
              <h1 className="name">{products[product].name}</h1>
              <p className="category">{products[product].category}</p>
              <p className="description">{products[product].description}</p>
              <p className="price">Price: ${products[product].price}</p>
              <button type="button" onClick={self.addToCart} disabled={stockAvailable  > 0 ? '' : 'disabled'}>
                {stockAvailable > 0 ? 'Add To Cart' : 'Sold Out'}
              </button>
            </div>
          </div>
        </li>
        )
        })}
      </ul>
    );
  },

});

module.exports = FluxProduct;

相关FluxCartApp.react.js组件:

render: function(){
    return (
      <div className="flux-cart-app">
        <FluxCart products={this.state.cartItems} count={this.state.cartCount} total={this.state.cartTotal} visible={this.state.cartVisible} />
        <FluxProduct product={this.state.product} cartitems={this.state.cartItems} selected={this.state.selectedProduct} />
      </div>
    );
  },

相关购物车操作:

selectProduct: function(index){
    AppDispatcher.handleAction({
      actionType: FluxCartConstants.SELECT_PRODUCT,
      data: index
    })
  },

  addToCart: function(id, update){
    AppDispatcher.handleAction({
      actionType: FluxCartConstants.CART_ADD,
      id: id,
      update: update
    })
  },

抱歉，但我不确定需要粘贴哪些进一步的相关代码，如果有人有任何建议，我将不胜感激。

Answer 1

您正在从 map 函数内部访问 products 变量，而您应该使用传递给它的产品参数。另外，为什么要映射产品的键，只是将产品作为数组:

<ul>
{products.map(function(product){
return (
  <li key={product}>
    <div className="flux-product">
      <img src={'img/' + product.image}/>
      <div className="flux-product-detail">
        <h1 className="name">{product.name}</h1>
        <p className="category">{product.category}</p>
        <p className="description">{product.description}</p>
        <p className="price">Price: ${product.price}</p>
        <button type="button" onClick={self.addToCart.bind(null, product.id)} disabled={stockAvailable  > 0 ? '' : 'disabled'}>
          {stockAvailable > 0 ? 'Add To Cart' : 'Sold Out'}
        </button>
      </div>
    </div>
  </li>
  )
  })}
</ul>

请注意，我也使用 bind 将产品 ID 传递给 addToCart，这让我们可以像这样使用它，将绑定(bind) ID 传递为第一个参数:

addToCart: function(id, event){
    var update = {
      name: this.props.product.name,
      category: this.props.selected.category,
      price: this.props.selected.price
    }
    FluxCartActions.addToCart(id, update);
    FluxCartActions.updateCartVisible(true);
}

您可能还对答案“JavaScript variable binding and loop ”感兴趣，它可能是导致您的问题的一个因素，并且经常让 JavaScript 新手感到困惑。