React条件运算符异常：itemCount>0时目标按钮不显示

核心问题与修复点 #

• Props名称大小写不匹配：父组件ItemDetail传递的onadd与子组件ItemCount接收的onAdd大小写不一致，导致父组件的状态更新方法无法被触发。
• 未触发父组件状态更新：ItemCount的addToCart函数仅弹出提示，未调用onAdd将选中数量传递给父组件，使得itemCount始终为0，无法切换到跳转按钮。
• 子组件初始状态错误：ItemCount的number状态初始化为0，未使用传入的initial props，不符合业务逻辑中的初始数量设置。

修改后的ItemDetail组件 #

const ItemDetail = ({product}) => {
  const [itemCount, setItemCount] = useState(0)

  const onAdd = (quantity) => {
    setItemCount(quantity)
  }

  return (
    <div className="vino-container">
      <img className="vino-imagen" alt="a_wine_image" src={product.image} />
      <div className="vino-orden">
        <h3 className="vino-titulo">{product.title}</h3>
        <p className="vino-descripcion">{product.description}</p>
        <p className="vino-precio">${product.price}</p>
        {itemCount === 0
        ? <ItemCount stock={product.stock} initial={product.initial} onAdd={onAdd}/>
        : <Link to="/cart"><button className="btn btn-light">Revisar</button></Link>
        }
      </div>
    </div>
  );
};

修改后的ItemCount组件 #

function ItemCount({stock, initial, onAdd}) {
    const [number, setNumber] = useState(initial);

    const handleNumberSum = () => {
        if(number >= stock){
            return
        }
        setNumber(number+1)
    }

    const handleNumberMin = () => {
        if(number <= 1){
            return
        }
        setNumber(number-1)
    }

    const addToCart = () => {
        alert(`Has añadido ${number} productos`)
        onAdd(number)
    }

    return (
        <div className="d-grid gap-2 d-md-block">
            <button className="btn btn-primary resta" type="button" onClick={handleNumberMin}>-</button>
            {number}
            <button className="btn btn-primary suma" type="button" onClick={handleNumberSum}>+</button>
            <button className="btn btn-primary agregar" type="button" onClick={addToCart}>Add to cart</button>
        </div>
 )  
}

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