在 React 中，setState 是异步操作，直接在 setState 后读取或使用新状态（如存入 sessionStorage）可能导致获取到旧值；需利用其回调函数确保状态更新完成后再执行依赖逻辑。
在 react 中，`setstate` 是异步操作，直接在 `setstate` 后读取或使用新状态（如存入 `sessionstorage`）可能导致获取到旧值；需利用其回调函数确保状态更新完成后再执行依赖逻辑。
React 的 setState 设计为批量更新与性能优化而异步执行——这意味着调用 this.setState() 后，组件的 this.state 并不会立即反映新值，且后续同步代码（如 sessionStorage.setItem）仍会基于旧状态运行。这正是你遇到的问题：开关视觉已切换，但 sessionStorage 中保存的仍是上一次的 checked 值。
✅ 正确做法是使用 setState 的第二个参数——回调函数（callback），该函数会在状态更新完成、组件重新渲染后被调用：
handleChange(checked) {
this.setState({ checked }, () => {
// ✅ 此处 this.state.checked 已为最新值
// 且 DOM 已更新，可安全执行副作用
sessionStorage.setItem("value", checked);
});
}
⚠️ 注意事项：
- 不要误用 this.state.checked 替代参数 checked：回调中 checked 是事件传入的确定值（更可靠），而 this.state.checked 虽然此时也已更新，但若存在多个 setState 批量合并，显式传参更清晰、更不易出错；
- 若需同时触发多个副作用（如发送埋点、更新 URL、启用加载指示器），全部放入回调内统一管理；
- 如需在函数组件中实现等效逻辑，请改用 useState 配合 useEffect：
const [checked, setChecked] = useState(false);
useEffect(() => {
sessionStorage.setItem("value", checked);
}, [checked]);
? 小结：无需额外添加 spinner 或轮询判断——React 的 setState 回调机制已为你提供了精确的“状态就绪”信号。善用它，即可确保所有依赖新状态的操作（持久化、API 请求、UI 反馈等）在正确时机执行，既简洁又可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
