在 React 或 Next.js 中，若在事件处理函数中直接读取 useState 的当前值并用于条件判断，会因状态更新异步性导致逻辑错位；正确做法是使用函数式更新并缓存新状态值进行后续计算。
在 react 或 next.js 中，若在事件处理函数中直接读取 `usestate` 的当前值并用于条件判断，会因状态更新异步性导致逻辑错位；正确做法是使用函数式更新并缓存新状态值进行后续计算。
在使用复选框（<input type="checkbox" />）实现动态过滤功能时，一个常见但容易被忽视的陷阱是：在事件处理器中直接读取 useState 的当前状态值（如 ufcOnly），然后立即用它做条件分支。由于 React 的 setState 是异步的，且函数闭包捕获的是调用时刻的状态快照，导致 if (ufcOnly) 判断始终滞后于用户操作——表现为“首次点击无反应”“状态反转”等现象。
例如，初始 ufcOnly = false，用户点击勾选时，代码执行：
if (ufcOnly) { /* 此时 ufcOnly 仍是 false，跳过过滤 */ }
setUfcOnly(!ufcOnly); // 触发更新，但尚未生效结果：UI 显示已勾选，但过滤逻辑未执行；第二次点击时，闭包中 ufcOnly 仍为 false（未更新），!ufcOnly 为 true，才真正进入过滤分支——造成行为颠倒。
✅ 正确解法是 分离状态更新与逻辑判断：先计算新状态值，再基于该值执行过滤，并使用函数式更新确保状态一致性：
const toggleUFCOnly = () => {
const updatedUfcOnly = !ufcOnly;
setUfcOnly(prev => !prev); // ✅ 函数式更新，避免闭包 stale value
if (updatedUfcOnly) {
const filtered = events.filter(event =>
event.organization?.includes("UFC")
);
setFilteredEvents(filtered);
} else {
setFilteredEvents(events);
}
setSelectedEventIndex(0);
};? 进阶建议：
- 使用 onChange 替代 onClick 更符合语义（复选框状态变更应由 change 事件驱动）；
- 添加 checked={ufcOnly} 实现受控组件，保证 UI 与状态严格同步；
- 对 events 做空值防护（如 event.organization?.includes）提升健壮性。
完整受控写法示例：
<input
type="checkbox"
checked={ufcOnly}
onChange={(e) => {
const next = e.target.checked;
setUfcOnly(next);
setFilteredEvents(
next
? events.filter(e => e.organization?.includes("UFC"))
: events
);
setSelectedEventIndex(0);
}}
className="sr-only peer"
/>此模式消除了闭包状态滞后风险，使过滤逻辑与用户操作实时对应，是 React 状态管理的最佳实践之一。
