为什么每次 React 组件渲染时我的 onClick 事件都会触发？

Question

我有一个用于产品页面的 React 功能组件。我正在计算用户希望使用

添加到购物篮的产品数量

const [productAmount, setProductAmount] = useState(1);

每次用户单击产品计数器时，都会更新产品金额的值：

  // Update counter
 const incrementAmount = () => {
    setProductAmount(productAmount+1)
  }

  const decrementAmount = () => {
    if (productAmount == 1){
      setProductAmount(1);
    }
    else {
      setProductAmount(productAmount-1);
    }
  }

用户使用以下方式触发此更新：

<div className='pci' onClick={decrementAmount}>-</div>
<div className='pci' onClick={incrementAmount}>+</div>

这一切都很好。

当用户想要将这些产品添加到购物篮时，我想使用以下方法将此数字写入本地存储：

  //Update cart
  const updateCart = () => {
    // Write number of products in cart to local storage
    localStorage.setItem("cartnumber", productAmount);
  }

用户使用以下方式触发此更新：

<div className='productaddtocart' onClick={updateCart({productAmount})}>Add to cart</div>

我的问题是本地存储会更新，我假设是通过 updateCart 函数，每次我点击

<div className='pci' onClick={decrementAmount}>-</div>
<div className='pci' onClick={incrementAmount}>+</div>

为什么会发生这种情况？如何在用户单击“添加到购物车”CTA 后更新本地存储？

详情请参阅上文

Answer 1

因为您立即调用您的函数。尝试像这样封装它：

<div className='productaddtocart' onClick={() => updateCart({productAmount})}>Add to cart</div>