React Native中currentColor切换为null功能失效问题求助

问题核心是闭包陷阱：handleSetCurrentColor函数在组件初始渲染时创建，捕获了当时的currentColor初始值（null）。后续状态更新后，函数内部依然使用旧的currentColor值做判断，导致点击同色时无法正确置为null。

直接修改handleSetCurrentColor，使用函数式状态更新即可解决：

const handleSetCurrentColor = (color: ColorsOptions) => {
  // 用函数式更新，接收最新的currentColor状态值
  setCurrentColor(prevColor => prevColor === color ? null : color);
};

完整修改后的核心代码片段：

const [currentColor, setCurrentColor] = useState<ColorsOptions | null>(null);

const handleSetCurrentColor = (color: ColorsOptions) => {
  setCurrentColor(prevColor => prevColor === color ? null : color);
};

为什么这样有效？ #

函数式更新会把当前最新的状态值（prevColor）作为参数传入，确保每次判断都基于最新的状态，彻底避开闭包带来的旧值问题。之前的写法里，currentColor是函数创建时的快照值，不会随着状态更新自动同步，所以逻辑失效。

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