React useState更新对象仅单次生效 报newQuantity初始化前访问错误

报错核心是变量访问触发了JavaScript的暂时性死区限制，同时遍历逻辑存在本质错误：

• 你在const newQuantity = chosenProducts.map(...)的赋值执行过程中，在map的回调函数里写了return newQuantity，此时newQuantity还没完成初始化，直接访问就会抛出Cannot access 'newQuantity' before initialization错误。
• 单对象场景下不报错的原因：当chosenProducts长度为1时，map仅执行1次回调，刚好命中id匹配的if分支，直接返回更新后的商品对象，根本不会走到return newQuantity的错误分支，所以看起来功能正常。一旦数组存储2个及以上对象，遍历到id不匹配的元素时就会触发上述引用错误。
• 额外逻辑问题：即便绕开初始化报错，map回调要求每次返回当前遍历位置的元素，返回整个newQuantity数组会导致最终生成的数组结构嵌套错乱，完全不符合状态更新预期。另外输入框返回的e.target.value是字符串类型，直接参与乘法计算虽然会触发隐式类型转换，但存在字符串拼接等隐性bug风险。

1. 修正map遍历逻辑：id不匹配的遍历项直接返回原商品对象p，不要访问未初始化的外层newQuantity变量
2. 对输入的数量值做显式数字类型转换，避免计算异常
3. 区分变量命名，不要把整个更新后的商品数组和单个商品的数量值用同名变量，降低理解成本

修复后的处理函数代码如下：

const onChangeQuantityHandler = (id, inputVal) => { 
  // 显式将输入的字符串值转为数字
  const quantity = Number(inputVal);
  const updatedProducts = chosenProducts.map(product => {
    if(product._id === id){
      return {
        ...product, 
        quantity: quantity, 
        subtotal: quantity * product.price 
      }
    }
    // 非目标商品直接返回原对象，不做修改
    return product
  })
  setChosenProducts(updatedProducts)
}

原数字输入框的绑定逻辑无需修改，可以正常使用。

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