React中useState计数器每次增减2而非1的问题排查

1. 计数器点击一次增减2的问题 #

原因 #

• React 18开发环境的严格模式会执行两次状态更新函数，用于检测副作用，这会导致开发时看到计数器变化两次（生产环境不会出现此问题）。
• 当前状态更新时直接修改了数组内对象的属性，虽展开了数组，但对象仍是原引用，可能引发不必要的重渲染或状态异常。

修复方案 #

遵循React不可变更新原则，创建新对象来更新count，避免直接修改原对象：

const decrementCount = (index) => {
  setProduct((prevState) => {
    return prevState.map((item, i) => {
      if (i === index) {
        return {
          ...item,
          count: Math.max(0, item.count - 1)
        };
      }
      return item;
    });
  });
};

const incrementCount = (index) => {
  setProduct((prevState) => {
    return prevState.map((item, i) => {
      if (i === index) {
        return {
          ...item,
          count: Math.min(10, item.count + 1)
        };
      }
      return item;
    });
  });
};

若需验证是否为严格模式导致，可暂时移除index.js中的<React.StrictMode>包裹，生产环境无需额外处理。

2. products.map is not a function错误 #

原因 #

你曾尝试在状态更新函数中返回updatedProducts[index].count（单个数字），这会将product状态从数组类型覆盖为数字类型，后续调用product.map自然报错。

修复方案 #

• 确保setProduct始终接收数组类型的值，状态更新函数的返回值必须是完整数组，不能是单个元素的属性。
• 为避免API请求失败或初始状态异常导致的非数组情况，渲染时增加数组类型判断：

{Array.isArray(product) && product.map((item, index) => {
  // 原渲染逻辑
})}

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