React事件处理：购物车数量onChange默认值无法自动传递问题

你的问题根源很清晰：组件初始化时itemsToSendToCart是空对象，只有用户手动触发onChange选择数量时才会填充productID和selectedQty，所以第一次点击"Add To Cart"时，传递的是空对象，导致父组件拿到undefined。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：组件初始化时就设置默认值 #

直接在state初始化或者componentDidMount里，基于传入的productID设置默认的数量1，这样即使用户没手动选，state里也有正确的数据。

修改Product组件的代码：

import React, { Component } from "react";
import Stock from "../modules/stock";
class Product extends Component {
  // 初始化时就用props的productID和默认数量1填充state
  state = { 
    itemsToSendToCart: {
      productID: this.props.productID,
      selectedQty: 1
    } 
  };

  componentDidMount() {
    // 可选：校验库存，确保默认数量不超过库存
    const { productQtyInStock } = this.props;
    if (productQtyInStock < 1) {
      this.setState(prev => ({
        itemsToSendToCart: {
          ...prev.itemsToSendToCart,
          selectedQty: 0
        }
      }));
    }
  }

  onItemQtySelected = event => {
    const selectedQty = parseInt(event.target.value, 10);
    const productID = this.props.productID; // 直接从props拿更可靠，无需从option取
    
    // 校验数量，确保不小于1且不超过库存
    const validQty = selectedQty < 1 ? 1 : Math.min(selectedQty, this.props.productQtyInStock);

    // 注意：不要直接修改state对象，用展开运算符创建新对象
    this.setState(prev => ({
      itemsToSendToCart: {
        ...prev.itemsToSendToCart,
        productID,
        selectedQty: validQty
      }
    }));
  };

  renderQtyElement() {
    const { productQtyInStock } = this.props;
    let arrayOfOptions = [];
    let count = 1;
    while (count <= productQtyInStock) {
      arrayOfOptions.push(count);
      count++;
    }
    return arrayOfOptions;
  }

  render() {
    const { productID, productName, productPrice, productDesc, productCategory } = this.props;

    return (
      <React.Fragment>
        <div key={productID} className="card" style={{ marginRight: 0 }}>
          <img className="card-img-top" src="https://sc01.alicdn.com/kf/UT8f0GFXOJbXXagOFbXG/Soccer-Balls-Pakistan.jpg" alt="Card image cap" />
          <div className="card-body">
            <h5 className="card-title">Name: {productName}</h5>
            <p className="card-text">Description: {productDesc}</p>
            <p className="card-text">Price: {productPrice}</p>
            <p className="card-text">
              <label>Qty:</label>
              <select 
                onChange={this.onItemQtySelected}
                // 设置默认选中项，让UI和逻辑默认值保持一致
                defaultValue={1}
              >
                {this.renderQtyElement().map(qty => (
                  <option key={qty} value={qty}>
                    {qty}
                  </option>
                ))}
              </select>
            </p>
            <p className="card-text">Category: {productCategory}</p>
            <button 
              onClick={() => this.props.onAddToCart(this.state.itemsToSendToCart)}
              className="btn btn-primary"
            >
              Add To Cart
            </button>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
export default Product;

同时，调整Catalogue组件的handleAddToCart，统一参数命名（避免selectedQty和productQty的混淆）：

handleAddToCart = ({ productID, selectedQty }) => {
  const productQty = selectedQty < 1 ? 1 : selectedQty;
  let item = { productID, productQty };
  // 用展开运算符简化数组更新
  let updatedItemsForCart = [...this.state.itemsForCart, item];
  this.setState({ itemsForCart: updatedItemsForCart });
};

方案2：点击按钮时直接获取当前select的选中值 #

如果不想依赖state维护数量，也可以在点击"Add To Cart"时，直接从DOM中获取select的当前值，这样不管用户有没有手动选，都能拿到正确的数量：

修改Product组件的按钮点击逻辑（需要给select加ref）：

class Product extends Component {
  // 创建ref关联select元素
  selectRef = React.createRef();

  // ... 其他代码不变

  render() {
    // ... 其他代码
    return (
      // ... 其他代码
      <select 
        ref={this.selectRef}
        onChange={this.onItemQtySelected}
        defaultValue={1}
      >
        {this.renderQtyElement().map(qty => (
          <option key={qty} value={qty}>
            {qty}
          </option>
        ))}
      </select>
      // ...
      <button 
        onClick={() => {
          // 直接从DOM获取当前选中值
          const selectedQty = parseInt(this.selectRef.current.value, 10);
          const validQty = selectedQty < 1 ? 1 : Math.min(selectedQty, this.props.productQtyInStock);
          const itemToSend = {
            productID: this.props.productID,
            selectedQty: validQty
          };
          this.props.onAddToCart(itemToSend);
        }}
        className="btn btn-primary"
      >
        Add To Cart
      </button>
    )
  }
}

这个方案的好处是不用维护state，直接从DOM获取最新值，避免state和UI不一致的问题。

关键优化点说明 #

• 不要直接修改state对象：你之前的const itemToCart = this.state.itemsToSendToCart; itemToCart.productID = productID;是直接修改state，这会导致React无法检测到state变化，必须用setState并创建新对象。
• 统一参数命名：确保子组件传递的字段和父组件接收的字段对应，避免混淆。
• 设置select的defaultValue：让UI默认选中1，和逻辑上的默认值保持一致，提升用户体验。

内容的提问来源于stack exchange，提问作者billy