JS参数使用||运算符时localStorage有值却读取后备值问题

你遇到的问题本质是两个React开发的常见认知误区，不是||运算符逻辑错误：

• React的状态更新是异步批处理的：调用setSubMenu不会同步修改当前作用域里的subMenu变量，你在set语句之后立刻打印subMenu，拿到的永远是当前渲染闭包里捕获的旧状态值，根本不是刚写入的新值，这是你看到打印结果为后备值的核心原因，和||分支判断无关。
• 你写的||兜底逻辑本身存在隐患：localStorage.getItem只有key完全不存在时才会返回null，如果key存在但存储的值是空字符串、'0'、'false'这类falsy值，||会错误判定为值不存在，直接走右侧兜底逻辑，甚至可能触发JSON解析报错。

1. 调整状态验证逻辑：不要在setSubMenu调用后同步打印状态值，通过useEffect监听subMenu变化，才能拿到更新完成后的最新值。
2. 替换兜底判断逻辑：不要用||判断localStorage值是否存在，优先显式判断返回值是否为null，避免falsy值导致的逻辑误判，同时减少重复的API调用和序列化操作。

修正后的代码参考：

// 提前读取localStorage值，避免重复调用getItem
const storedSubMenuStr = localStorage.getItem('subMenu');
setSubMenu(
  storedSubMenuStr ? JSON.parse(storedSubMenuStr) : subMenu
);

// 监听状态变化，打印更新后的值
useEffect(() => {
  console.log('更新完成的subMenu值：', subMenu);
}, [subMenu]);

补充说明：如果你在React18+版本开启了严格模式，开发环境首次挂载会执行双渲染，会进一步放大状态更新时序的感知差异，但不影响生产环境的实际逻辑。

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