React onClick事件同时执行两个函数的实现及问题排查

核心问题原因 #

1. handleSubmit调用逻辑错误：react-hook-form的handleSubmit是高阶函数，调用handleSubmit(onSubmit)只会返回一个待执行的提交函数，不会直接触发提交逻辑，你需要再调用一次返回的函数才会执行。
2. editCart参数和变量冲突：你给editCart传了两个参数，但函数定义没有接收形参；同时editCart内部map方法的第二个参数（数组下标）被你重命名为hoodieQuantity，覆盖了外层的实际数量变量，导致逻辑错误。
3. 状态更新闭包问题：直接使用currentCart更新状态可能出现闭包陷阱，推荐使用函数式更新获取最新的状态值。

修正步骤 #

第一步：修正editCart函数 #

// 接收传入的商品名和数量参数
const editCart = (productName, quantity) => {
  // 用函数式更新获取最新的购物车状态
  setCurrentCart(prevCart => 
    prevCart.map(cartItem =>
      cartItem.name === productName 
        ? { ...cartItem, quantity: quantity } 
        : cartItem
    )
  );
  console.log(currentCart);
};

第二步：修正按钮点击事件 #

<Btn 
  onClick={() => {
    // handleSubmit返回的函数要加()调用才会执行提交
    handleSubmit(onSubmit)();
    // 传入editCart需要的两个参数
    editCart("Hoodie", hoodieQuantity);
  }}
>
  Add to Cart
</Btn>

额外问题解答 #

• 关于参数传递：如果函数本身需要外部传参，就需要在箭头函数里调用时传入对应参数，不需要的参数不用传。
• 关于too many re-render报错：如果不写箭头函数直接写onClick={handleSubmit(onSubmit)}，组件渲染的时候就会直接执行handleSubmit(onSubmit)，如果函数内部触发状态更新就会导致无限重渲染，所以事件绑定必须传函数引用，不能直接写函数调用表达式。

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