React使用Axios实现JWT登录时出现'data'未定义错误如何解决

• 直接触发'data' is not defined no-undef报错的原因：你在handleSubmit方法末尾写了return data;，但整个作用域内从未定义过名为data的变量，ESLint检测到未定义变量就抛出了该错误。
• 隐藏的逻辑错误：axiosInstance.post是异步请求方法，默认返回Promise对象，你没有做异步处理就直接读取response.data，即使删掉未定义的return语句，也会拿到undefined，后续设置请求头、存储token的逻辑都会失效。

1. 修改Login.js的handleSubmit方法 #

将方法改为异步逻辑，删除/修正未定义的data变量：

// 方法前加async标识声明为异步方法
async handleSubmit(event) {
    event.preventDefault();
    try {
        // 加await等待请求完成，拿到后端返回的实际响应结果
        const response = await axiosInstance.post('/token/obtain/', {
            username: this.state.username,
            password: this.state.password
        });
        const resData = response.data;
        axiosInstance.defaults.headers['Authorization'] = "Bearer " + resData.access;
        localStorage.setItem('access_token', resData.access);
        localStorage.setItem('refresh_token', resData.refresh);
        // 如果你不需要返回值可以删掉下面的return语句，需要返回就返回已定义的resData
        return resData;
    } catch (error) {
        throw error;
    }
}

2. 可选优化：修正axiosInstance初始化逻辑 #

你当前的实例初始化逻辑中，若本地没有存储的access_token，Authorization头会被赋值为Bearer null，可能导致后端校验异常，可优化为如下写法：

const axiosInstance = axios.create({
    baseURL: 'http://127.0.0.1:8000/',
    timeout: 5000,
    headers: {
        'Content-Type': 'application/json',
        'accept': 'application/json'
    }
});
// 仅当本地存在token时，才给实例默认添加Authorization头
const accessToken = localStorage.getItem('access_token');
if (accessToken) {
    axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
}

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