如何设置useState初始值，实现页面刷新后保持SubMenu展开状态？

算力阿峰

2026-9-25

解决方案

实现思路

React组件的state默认存储在运行内存中，页面刷新后内存数据会被清空，因此需要将子菜单的展开状态持久化存储到浏览器的本地存储（localStorage）中，页面初始化时从本地存储读取状态作为初始值即可保留刷新前的展开状态
你提到的prevState（函数式更新）可以用来避免state异步更新导致的取值偏差，属于更稳妥的写法，建议使用

适配后的代码实现

// 初始化时从localStorage读取之前存储的展开ID，不存在则默认null
// 如果你的navId是数字类型，用JSON.parse转换类型更稳妥：
// const [open, setOpen] = useState(JSON.parse(localStorage.getItem('activeSubMenuId')) || null);
const [open, setOpen] = useState(localStorage.getItem('activeSubMenuId') || null);

const toggle = (id) => {
  // 函数式更新确保拿到的是最新的open状态
  setOpen(prevOpen => {
    // 可选逻辑：点击已展开的菜单项则收起子菜单，不需要可以删掉判断直接返回id
    const targetOpenId = prevOpen === id ? null : id;
    // 数字类型ID建议用JSON.stringify转存：localStorage.setItem('activeSubMenuId', JSON.stringify(targetOpenId));
    localStorage.setItem('activeSubMenuId', targetOpenId);
    return targetOpenId;
  })
}

// 点击触发逻辑不需要修改
onClick={() => toggle(item.navId)}