React登录认证系统报错：未初始化前访问response问题排查

核心错误分析 #

• 提前使用未初始化变量：你在请求headers里尝试读取response?.token，但response是请求完成后才会赋值的变量，此时请求还未执行，变量根本不存在，直接触发报错。而且登录请求本身不需要携带Authorization头——这是获取token的初始请求，只有后续需要授权的接口才需要用拿到的token添加该头。
• 请求体格式错误：
  • 你的状态里定义的字段是email，但代码里写了loginInput.username，字段不匹配；
  • JSON.stringify(loginInput.username, loginInput.password)用法错误，JSON.stringify第一个参数应为要序列化的对象，而非单独的字段。另外axios默认会自动序列化JSON请求体，无需手动调用该方法。
• axios实例配置冲突：你导入的axios实例baseURL是http://localhost:3000，但请求时用了完整的远程URL，虽不直接导致当前报错，但建议统一配置避免混乱。

修复后的代码 #

const [loginInput, setLoginInput] = React.useState({
    email: '',
    password: ''
})

const handleSubmit = async (e) =>{
    e.preventDefault();
    try{
        // 使用你导入的自定义axios实例
        const response = await axios.post('/api/v1/users/login',
            // 直接传字段匹配的对象，axios自动处理JSON序列化
            { 
                email: loginInput.email, 
                password: loginInput.password 
            },
            {
                headers: { 
                    'Content-Type' : 'application/json'
                    // 移除错误的Authorization头
                }
            }
        );
        console.log('登录成功返回数据：', response)
        // 登录成功后，可将token存入本地存储或全局状态，供后续请求使用
        // localStorage.setItem('authToken', response.data.token)
    }catch(err){
        console.log('登录失败：', err.response?.data || err.message)
    }
}

额外说明 #

• 若自定义axios实例的baseURL与实际接口域名不符，需修改api.js中的baseURL为https://adscamp.thevootblog.com，这样请求时只需传相对路径/api/v1/users/login即可；
• 后续需要授权的请求，再在headers中添加Authorization: Bearer ${token}，其中token为登录成功后获取的返回值。

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