React/Redux项目商品详情页自动跳转购物车异常问题排查

你对onClick事件的绑定方式错误：你直接调用了addToCartHandler函数，而不是将函数引用传给onClick属性。这就导致只要ProductScreen组件渲染到按钮部分，不需要用户点击，就会立刻执行addToCartHandler，触发添加购物车 + 跳转至购物车页的逻辑。

错误位置在productScreen.js的按钮代码段：

// 错误写法：组件渲染时就会直接执行addToCartHandler
<button onClick={addToCartHandler(product._id, qty)} disabled={product.countInStock === 0} className="px-2 py-4 bg-pink-400 hover:bg-pink-300 hover:shadow-md text-white shadow-sm rounded-sm text-center my-4">Add to Cart</button>

你给onClick传入的是addToCartHandler(product._id, qty)的执行返回值，而非函数本身，所以组件渲染到这行代码时就会立刻触发函数执行。

你观察到的「点图片直接跳购物车、点名称会先加商品再跳」的差异，是因为两种场景下组件渲染到按钮部分时，qty和product的加载时机不同：如果product加载完成时qty还是初始值0，就不会触发实际加购逻辑直接跳转；如果加载完成时已经拿到了有效qty，就会先加购再跳转，本质都是函数提前执行导致的。

把onClick的值改为用匿名函数包裹，只有用户点击按钮时才会执行内部的addToCartHandler：

// 正确写法
<button onClick={() => addToCartHandler(product._id, qty)} disabled={product.countInStock === 0} className="px-2 py-4 bg-pink-400 hover:bg-pink-300 hover:shadow-md text-white shadow-sm rounded-sm text-center my-4">Add to Cart</button>

另外你当前的数量选择框有两处小问题，可以同步修复：

1. 初始数量设为0不合理，建议改成默认1
2. 选择框的value硬编码为1，没有绑定state里的qty，修改后代码如下：

const [qty, setQty] = useState(1) // 初始值改为1

// 选择框绑定value为qty
<select onChange={(e) => setQty(e.target.value)} name="qty" value={qty} >
    { [...Array(10).keys()].map(x => (
        <option value={x+1} key={x+1}>{x+1}</option>
    ))}
</select>

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