MERN应用登录页Axios响应data未定义问题求助

错误 TypeError: Cannot read properties of undefined (reading 'data') 核心原因是你混用了async/await和.then/.catch链式调用，导致response变量被赋值为undefined，另外登录请求中错误携带未初始化的token也可能引发异常。

具体问题点 #

• async/await与.then混用导致response丢失
  你代码里的let response = await axios({...}).then((response) => setShow(true))，await会等待请求完成，但.then回调返回的是setShow(true)的结果（React的setState无返回值，即undefined），最终response变量变成undefined，后续访问response.data自然报错。
• 登录请求错误携带x-access-token
  登录接口是用来获取token的，此时用户还未登录，token变量未定义，请求头里带这个字段可能干扰后端逻辑——你用Postman测试没问题，大概率是Postman没加这个请求头。
• axios.all用法错误
  axios.all的正确用法是axios.all([请求1, 请求2]).then(axios.spread(回调))，你当前把spread回调作为第二个参数传入，逻辑不会执行。

重构登录函数（统一用async/await，避免混用） #

const login = async (e) => {
    e.preventDefault();

    try {
        const loginUrl = "http://localhost:4000/api/user/login";
        const customerUrl = "http://localhost:4000/api/stripe/customer";
        
        // 登录请求：移除不必要的x-access-token头
        const response = await axios({
            method: "post",
            url: loginUrl,
            data: {
                email: loginEmail,
                password: loginPassword
            },
            headers: {
                "Content-Type": "application/json"
            },
        });

        setShow(true); // 请求成功后更新状态

        // 处理登录响应
        if (response.data && response.data.token) {
            const token = response.data.token; // 注意取token字段，原代码直接赋值response.data是错误的
            setToken(token);
            console.log(`Login successful. email: ${loginEmail} token: ${token}`);

            // 获取客户数据
            const response2 = await axios({
                url: customerUrl,
                method: "post", // 根据后端实际请求方式调整
                data: {
                    email: loginEmail,
                },
                headers: {
                    "x-access-token": token,
                }
            });

            console.log("Customer Data Success");
            console.log("RESPONSE 1: ", response.data);
            console.log("RESPONSE 2: ", response2.data);

            // 后续操作：比如存到localStorage、跳转页面
            localStorage.setItem("authToken", token);
            // navigate("/dashboard"); // 如果使用react-router可以跳转页面

        } else {
            console.error("Token not found in response");
        }

    } catch (error) {
        console.log("Error with Login Response: ", error);
    }
};

• 统一异步处理风格：要么全用async/await，要么全用.then/.catch，不要混用，避免变量赋值错误。
• 检查token赋值逻辑：原代码中let token = response.data;应该改为response.data.token，后端返回的是包含token字段的对象（根据你的Postman测试结果）。
• 细化错误处理：可以在catch中区分请求错误、响应错误，比如通过error.response?.data查看后端返回的具体错误信息。

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