React中如何将Context的lesson状态持久化到localStorage解决刷新undefined问题

问题根因 #

• Context 中 useState() 未传入初始值，首次渲染时lesson天然为undefined
• 读取localStorage的逻辑放在了Lesson组件的副作用中，副作用执行时机晚于组件首次渲染，首次渲染时拿不到有效取值
• Lesson组件中无依赖项的存储副作用，会在首次渲染后立刻把undefined写入localStorage，覆盖之前存储的正确数值
• 持久化逻辑分散在子组件，不符合全局状态的维护规范

修复步骤 #

1. 调整Context.js的状态初始化逻辑，直接在状态创建时读取localStorage取值，避免初始undefined

// Context.js 修改后代码
const [lesson, setLesson] = useState(() => {
  // 初始化时直接读本地存储，没有值默认给1（符合1-7的取值范围）
  const savedLesson = localStorage.getItem('lesson')
  return savedLesson ? JSON.parse(savedLesson) : 1
});

// 新增全局同步逻辑：lesson变化时自动写入localStorage，不用分散在子组件处理
useEffect(() => {
  localStorage.setItem('lesson', JSON.stringify(lesson))
}, [lesson])

2. 删掉Lesson.js中的两个冗余useEffect，避免错误覆盖localStorage取值。所有持久化逻辑统一收归Context内部维护，子组件直接使用context.lesson即可。

3. 如有必要，业务代码使用lesson时可加可选链兜底，避免极端情况报错：

// 示例使用
const currentLesson = context?.lesson ?? 1

原代码的问题本质是状态初始化时机和副作用执行顺序不匹配，将持久化逻辑和全局状态绑定在一起，就能保证刷新后状态立刻可用，不会出现初始undefined的问题。

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