React登录页重定向时未将用户ID存入State与LocalStorage问题求助

核心问题 #

你的代码存在两个关键问题导致ID无法存入LocalStorage：

1. setUserId是异步更新操作，调用后无法立刻获取到最新的userid值，所以你写的if(userid === result.data.ID)判断逻辑永远不会触发。
2. 原useEffect的依赖是空数组[]，只会在组件首次挂载时执行一次，此时userid是初始的undefined，存入LocalStorage的是无效值；登录成功后setUserId更新了userid，但useEffect未监听userid变化，不会重新执行，新ID无法存入。

修复方案一（最直接高效） #

直接在请求成功的回调里完成LocalStorage存储和页面跳转，逻辑更直观：

const [userid, setUserId] = useState()
const handleSubmit = (e) => {
    e.preventDefault()
    axios.post('http://localhost:3001/Signin', { email, password })
        .then(result => {
            if (result.data.message === "Successfully Login") {
                const userIdStr = result.data.ID.toString();
                // 先存入LocalStorage
                localStorage.setItem('UserID', userIdStr);
                // 更新state（如果后续组件需要用到userid）
                setUserId(userIdStr);
                // 跳转首页
                navigate('/');
            }
        })
        .catch(err => console.log(err))
}

// 组件挂载时从LocalStorage读取已保存的ID到state（可选）
useEffect(() => {
    const savedUserId = localStorage.getItem('UserID');
    if (savedUserId) {
        setUserId(savedUserId);
    }
},[])

修复方案二（依赖state变化触发操作） #

如果希望通过state的更新来触发存储和跳转，需要修改useEffect的依赖项：

const [userid, setUserId] = useState()

const handleSubmit = (e) => {
    e.preventDefault()
    axios.post('http://localhost:3001/Signin', { email, password })
        .then(result => {
            if (result.data.message === "Successfully Login") {
                setUserId(result.data.ID.toString());
            }
        })
        .catch(err => console.log(err))
}

// 监听userid变化，有值时存入LocalStorage并跳转
useEffect(() => {
    if (userid) {
        localStorage.setItem('UserID', userid);
        navigate('/');
    }
}, [userid, navigate]) // 依赖userid和navigate，确保值变化时触发

// 组件挂载时读取LocalStorage到state（可选）
useEffect(() => {
    const savedUserId = localStorage.getItem('UserID');
    if (savedUserId) {
        setUserId(savedUserId);
    }
},[])

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