Next.js中npm start时handleClick失效，npm run dev正常求助

核心错误1：直接修改原始数据（Mutation） #

你的reducer里action.payload.unit++这行代码直接修改了传入的action.payload对象，而这个对象大概率是来自state.items中的原始元素引用。这种状态突变在开发模式下可能因为React的宽松检测还能工作，但生产环境（npm start对应构建后的生产模式）中，React的优化机制会忽略这种突变，导致状态无法正确更新，所以点击按钮后看不到效果。

核心错误2：引用比较的不可靠性 #

state.items.filter((each) => each !== action.payload)使用的是对象引用比较，如果action.payload不是state.items中元素的直接引用（比如经过了浅拷贝或其他处理），这行过滤逻辑会失效，导致无法正确移除目标项，最终状态更新出错。

修复后的代码 #

Reducer部分：

case 'ADD_ONE_MORE':
  // 用唯一标识（比如id）来匹配目标项，替代引用比较
  const getAllOtherItems = state.items.filter(
    (each) => each.id !== action.payload.id, // 假设每个item有唯一id字段
  );
  return {
    ...state,
    items: [
      ...getAllOtherItems,
      // 不修改原始payload，而是创建新对象并计算新的unit值
      { ...action.payload, unit: action.payload.unit + 1 },
    ],
  };

补充说明：

• 如果你的item没有id这类唯一标识，可以用其他唯一属性（比如名称+其他特征）来匹配，避免引用比较的问题。
• 始终遵循不可变更新原则：修改状态时永远不直接改变原始对象，而是通过解构、扩展运算符等方式创建新的对象/数组，这样React才能准确检测到状态变化并触发组件重渲染。

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