React中useEffect无法更新useState状态，authenticated始终为null

可能的触发原因： #

• useEffect执行时机或读取逻辑错误：如果你的useEffect没加空依赖数组[]，会导致组件重复执行该钩子，或者挂载阶段没触发读取操作；另外localStorage存储的是字符串类型，若直接把"true"赋值给布尔类型的authenticated，可能引发类型不匹配（不过你提到状态始终为null，更大概率是useEffect没在挂载时执行）。
• 路由跳转逻辑执行过早：组件初始渲染时authenticated是null，如果在渲染阶段直接基于该状态判断跳转，此时useEffect还没来得及从localStorage读取值更新状态，就会触发跳回TestPage的逻辑。
• localStorage键名不一致：登录页存的键是"authenticated"，Dashboard组件读取时是否写错了键名（比如大小写、拼写错误）？

具体解决步骤： #

1. 修正useEffect的写法：确保组件挂载时仅读取一次localStorage，并将字符串值转为布尔值：

import { useEffect, useState } from 'react';

function DashboardPage() {
  const [authenticated, setAuthenticated] = useState(null);

  useEffect(() => {
    const storedAuthStatus = localStorage.getItem("authenticated");
    // 把字符串转为布尔值，避免类型不匹配
    setAuthenticated(storedAuthStatus === "true");
  }, []); // 空依赖数组确保仅在组件挂载时执行一次

2. 延迟路由跳转逻辑，等待状态更新：将路由跳转逻辑放在依赖authenticated的useEffect中，避免初始null状态触发错误跳转：

import { useNavigate } from 'react-router-dom';

// ... 其他组件代码
const navigate = useNavigate();

useEffect(() => {
  // 仅在authenticated明确为true/false时执行跳转
  if (authenticated === true) {
    navigate("/MyProfilePage");
  } else if (authenticated === false) {
    navigate("/TestPage");
  }
}, [authenticated, navigate]);

3. 核对键名一致性：确认登录页localStorage.setItem("authenticated", true)的键名，和Dashboard组件读取时的键名完全一致，注意大小写和拼写细节。

调整后，组件挂载时会先读取localStorage更新状态，再根据更新后的状态判断跳转目标，就能避免状态始终为null导致的错误跳转问题。

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