本文详解如何在 React 中正确处理密码数字按钮的点击事件，避免因错误使用状态更新导致的类型错误，重点讲解 useState 数组状态的不可变更新模式及函数式更新的必要性。

本文详解如何在 react 中正确处理密码数字按钮的点击事件，避免因错误使用状态更新导致的类型错误，重点讲解 `usestate` 数组状态的不可变更新模式及函数式更新的必要性。

在构建密码输入组件（如四位数字验证码、PIN 码键盘）时，一个常见误区是直接对数组状态进行“展开式赋值”，例如 setPressedNumbers(...cur, number)。这种写法不仅语法错误（...cur 无法在函数调用中直接解构），更严重的是它违背了 React 状态更新的不可变原则——cur 并非当前状态值，而是事件参数（onClick 的 SyntheticEvent 对象），导致运行时报错或状态丢失。

✅ 正确做法是使用 函数式更新（functional update），确保基于最新状态安全地派生新值：

<button
  key={idx}
  onClick={() => setPressedNumbers((cur) => [...cur, number])}
>
  {number}
</button>

这里的关键点在于：

Dagre React Flow

使用 dagre 与 React Flow (@xyflow/react) 实现自动图布局。适用于自动布局、层级布局、树形结构或节点排列等场景。

下载

• setPressedNumbers 接收一个函数 (prev) => newState，React 会自动传入当前最新状态 cur（即 pressedNumbers 数组）；
• 使用扩展运算符 [...cur, number] 创建新数组，而非修改原数组，符合不可变更新规范；
• 避免闭包陷阱：若直接写 setPressedNumbers([...pressedNumbers, number])，可能捕获过期的 pressedNumbers 值（尤其在快速连续点击时），而函数式更新始终基于最新状态。

⚠️ 注意事项：

• 确保初始状态为数组：const [pressedNumbers, setPressedNumbers] = useState<number[]>([]);
• 若需限制长度（如仅允许输入 4 位），可在更新前校验：

  onClick={() => 
    pressedNumbers.length < 4 && 
      setPressedNumbers((cur) => [...cur, number])
  }

• 清除逻辑应同样使用函数式更新：setPressedNumbers((cur) => cur.slice(0, -1))（删除最后一位）。

总结：React 中更新数组类状态，务必采用 setState(prev => [...prev, newItem]) 模式。它既保证状态更新的可靠性，又规避了闭包与类型错误风险，是密码输入、购物车、待办列表等场景的标准实践。