React中useEffect与localStorage结合使用的实现问题咨询

你这段代码存在几个关键问题，直接导致逻辑不生效，下面是问题分析和修正后的实现：

原代码的问题 #

• 初始化state时直接用localStorage.complete错误，应该用localStorage.getItem('complete')读取值，且localStorage只能存字符串，需要手动转布尔值；同时未设置默认的false，当localStorage无值时会得到null
• 你写的useEffect仅读取值但未更新state，完全没有作用，可以直接删除
• completeTest函数中存的true会被自动转为字符串"true"，且存完后未同步更新组件state，导致页面不会立刻渲染结果组件

修正后的代码 #

// 用函数初始化state，避免每次渲染都读取localStorage，同时处理默认值和类型转换
const [completedTest, setCompletedTest] = useState(() => {
  const storedComplete = localStorage.getItem('complete');
  // 把localStorage的字符串值转为布尔值，无值时默认false
  return storedComplete === 'true';
});

const completeTest = () => {
  // 存储字符串格式的true，适配localStorage的存储规则
  localStorage.setItem('complete', 'true');
  // 同步更新组件状态，触发页面重新渲染
  setCompletedTest(true);
};

// 渲染逻辑保持不变
{completedTest ? <ShowResultsComponent /> : null}

额外说明 #

• 使用useState的函数初始化形式，只会在组件首次渲染时执行一次读取localStorage的操作，提升性能
• 由于localStorage仅支持字符串存储，所以存值时要明确存'true'，取值时通过判断是否等于'true'来转换为布尔值
• 完成测试后必须调用setCompletedTest更新状态，这样组件才会立即响应状态变化并显示结果组件

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