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

Question

我正在学习React.js（我是JavaScript的初学者），并且在使我的addToCart函数正常工作方面有些困难。 我设法使所有产品都可以显示，但是将它们添加到购物车中只会添加第一个项目，一旦该项目缺货，那么所有项目都将缺货。

我确定我遗漏了一些明显的东西，但是请您多加关注我的代码。

这个应用程序的Github回购

以下是我的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变量，而应该使用传递给它的product参数。 此外，为什么要映射产品的键，而只是将我们作为数组来使用：

<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 ，这使我们可以这样使用它，并将绑定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变量绑定和循环 ”感兴趣，这可能是导致您的问题的原因，并且经常赶上JavaScript新手。