React组件onClick事件异常触发，localStorage非预期更新问题咨询

问题原因 #

你在“Add to Cart”按钮的onClick属性里直接执行了updateCart({productAmount})，这会导致组件每次渲染时都会调用updateCart函数——包括点击加减按钮修改productAmount触发组件重渲染的时候，所以每次加减操作都会更新localStorage。

React的onClick需要接收一个回调函数（即点击时才执行的函数），而不是直接执行函数的结果。

解决方案 #

修正onClick的写法 #

把直接调用函数改成传递回调，有两种常用方式：

方式1：直接使用无参的updateCart

如果你的updateCart函数直接使用组件内的productAmount（目前你的代码逻辑就是如此），可以直接把函数名传给onClick，这样只有点击按钮时才会执行它：

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

方式2：用箭头函数传递参数（适配扩展需求）

如果后续需要给updateCart传额外参数，用箭头函数包裹，确保只有点击时才调用：

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

对应的updateCart可以改成接收参数的形式，逻辑更清晰：

const updateCart = (amount) => {
  localStorage.setItem("cartnumber", amount);
}

额外优化（可选） #

你的加减函数可以用React的函数式更新来避免异步state更新的潜在问题，让逻辑更可靠：

// 优化后的加数量函数
const incrementAmount = () => {
  setProductAmount(prevAmount => prevAmount + 1);
}

// 优化后的减数量函数
const decrementAmount = () => {
  setProductAmount(prevAmount => prevAmount <= 1 ? 1 : prevAmount - 1);
}

这种写法在state更新依赖于前一次state值时，能避免因state异步更新导致的逻辑错误。

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