React中UseContext的handleLogin函数无法触发问题求助

核心问题：handleLogin 参数顺序错误 #

你的handleLogin函数定义为：

const handleLogin = async (form, e) => {
    e.preventDefault()
    // ... 其余代码
}

但表单onSubmit事件只会传递一个event对象作为参数，导致实际调用时：

• 第一个参数form接收的是事件对象
• 第二个参数e为undefined

执行e.preventDefault()时会抛出Cannot read properties of undefined (reading 'preventDefault')错误，直接中断函数执行，所以点击提交后毫无反应。

修复方案 #

修正handleLogin的参数，只保留事件对象e：

const handleLogin = async (e) => {
    e.preventDefault()
    const res = await fetch("http://localhost:3500/login", {
        method: "POST",
        headers: { 'Content-Type': 'application/json' },
        credentials: "include",
        body: JSON.stringify({
            'username': e.target.username.value,
            'password': e.target.password.value
        })
    })
    // ... 其余代码不变
}

额外优化建议 #

1. 修正初始user状态的解码逻辑
   在AuthProvider的初始user状态中，localStorage.getItem('accessToken')需要和accessToken保持一致，用JSON.parse解析：

let [user, setUser] = useState(()=> 
    localStorage.getItem('accessToken') 
        ? jwt_decode(JSON.parse(localStorage.getItem('accessToken'))) 
        : null
)

2. 优化PrivateRoute写法（react-router-dom v6 推荐方式）
   当前PrivateRoute的写法可以调整为更符合v6规范的形式：

// PrivateRoute.js
import { Navigate } from 'react-router-dom'
import { useContext } from 'react'
import AuthContext from '../context/AuthContext'

const PrivateRoute = ({ children }) => {
    let { user } = useContext(AuthContext)
    return user ? children : <Navigate to="/login" />;
}

// App.js 中使用
<Route index element={<PrivateRoute><Home /></PrivateRoute>} />

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