React项目登录异常：输入错误密码后currentUser为undefined

测试网站登录功能时遇到问题：每次输入错误密码登录都会触发错误，查看浏览器控制台与Application面板后，发现localStorage中的currentUser值为undefined，无法定位错误原因。以下是相关代码：

Navbar.js #

import React from 'react'

function Navbar() {
  const user = JSON.parse(localStorage.getItem('currentUser'));
  return (
    <div>
      <nav className="navbar navbar-expand-lg">
        <a className="navbar-brand" href="#">
          FiVe Star Hotels
        </a>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav">
            {user ? (<><h1 style={{color : 'red'}}>{user.name}</h1></>) : (<>
              <li className="nav-item ">
                <a className="nav-link" href="/register">
                  Register
                </a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="/sign-in">
                  Sign-in
                </a>
              </li>
            </>)}

          </ul>
        </div>
      </nav>
    </div>
  )
}

export default Navbar

Loginscreen.js #

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import Loader from '../components/Loader'
import Error from '../components/Error'

function Loginscreen() {

  const [email, setemail] = useState('')
  const [password, setpassword] = useState('')
  const [loading, setloading] = useState(false);
  const [error, seterror] = useState();

  async function Login() {
      const user = {
        email,
        password,
      };
      try {
        setloading(true);
        const result = await axios.post('/api/users/sign-in', user).data
        setloading(false);

        localStorage.setItem('currentUser' , JSON.stringify(result));
        window.location.href='/home'

      } catch (error) {
        console.log(error)
        setloading(false);
        seterror(true)
        
      }
    }

  return (
    <div>
      {loading && (<Loader/>)}
      <div className="row justify-content-center mt-5">
        <div className="col-md-5 mt-5">   
          {error && (<Error message='Invalid Email or Password'/>)}
          <div className='bs'>
            <h2>Sign In</h2>
            <input type="text" className="form-control" placeholder="Your Email"
            value = {email} onChange = {(e) => { setemail(e.target.value) }}/>
            <input type="password" className="form-control" placeholder="Enter your password"
            value = {password} onChange = {(e) => { setpassword(e.target.value) }}/>

            <button className='btn btn-primary mt-3' onClick={Login}>Sign In</button>
          </div>
        </div>

      </div>
    </div>
  )
}

export default Loginscreen;

排查方向 #

• Axios数据获取优化：当前写法await axios.post(...).data虽能运行，但建议显式接收响应对象再取data，避免潜在的Promise解析问题：

  const response = await axios.post('/api/users/sign-in', user);
  const result = response.data;
  

• Navbar空值安全处理：当localStorage中无currentUser时，getItem返回null，JSON.parse(null)得到null，但如果currentUser被意外设为undefined，解析会报错。添加空值判断：

  const user = localStorage.getItem('currentUser') ? JSON.parse(localStorage.getItem('currentUser')) : null;
  

• 错误状态初始化：Loginscreen中error初始值为undefined，建议设为false，避免组件初始渲染时错误显示：

  const [error, seterror] = useState(false);
  

• 后端响应排查：在catch块中打印error.response，查看后端返回的错误详情，确认是否有异常响应影响前端逻辑：

  catch (error) {
    console.log(error.response);
    setloading(false);
    seterror(true);
  }
  

• localStorage修改追踪：检查是否有其他代码（如退出逻辑、全局状态）在登录失败时修改了currentUser的值。

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