React待办应用提交时LocalStorage显示正常，刷新后数据丢失如何解决？

你的代码中两个useEffect的声明顺序错误，这是导致刷新后本地存储被清空的核心原因：
React组件挂载时会严格按照useEffect的声明顺序依次执行回调：

1. 首先执行声明在前的、依赖为[todos, status]的useEffect，此时todos还是初始化的空数组，调用saveLocalTodos()会直接把空数组写入localStorage，覆盖掉你之前已经存储的待办数据
2. 之后才执行声明在后的空依赖useEffect调用getLocalTodos()，此时读到的已经是刚被覆盖的空数组

• 调换两个useEffect的声明顺序，优先执行本地数据读取逻辑，再执行数据变动后的存储逻辑
• （可选优化）可以给存储逻辑增加校验避免无意义的写入，但调整顺序已经可以解决核心问题

修复后的代码片段参考：

// 优先读取本地存储的待办数据
useEffect(() => {
  getLocalTodos()
},[])

// todos或筛选状态变动后，再执行过滤和本地存储更新
useEffect(() => {
  filterHandler()
  saveLocalTodos()
},[todos, status])

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