React+SweetAlert登录功能报错：第二个参数无效，求排查代码问题

核心报错原因 #

你遇到的Uncaught (in promise) SweetAlert: 2nd argument ('undefined') is invalid错误，根源是登录请求失败时，response.message为undefined，传给SweetAlert的第二个参数不符合要求。但这只是表层问题，代码里还有多个底层逻辑错误：

具体错误与修复方案 #

1. loginUser函数无返回值，导致response始终为undefined #

你的loginUser是async函数，但内部的fetch调用没有返回结果，await之后response必然是undefined，后续读取response.message、response.accessToken都会报错。
修复代码：

async function loginUser(credentials) {
    // 去掉引号，直接使用环境变量
    let BaseUrl = process.env.MYCREDENTIALS;
    // 必须返回fetch的Promise链
    return fetch(BaseUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(credentials)
        })
        .then(data => data.json())
        // 添加错误捕获，避免请求失败抛出未处理的Promise错误
        .catch(err => {
            console.error('登录请求失败:', err);
            return { success: false, message: '网络请求失败' };
        })
}

2. 环境变量被错误包裹为字符串 #

let BaseUrl = 'process.env.MYCREDENTIALS';会把字符串"process.env.MYCREDENTIALS"作为请求地址，而非读取实际的环境变量值，导致请求地址无效。
修复：去掉引号，直接写process.env.MYCREDENTIALS（注意：如果用create-react-app，环境变量需要加REACT_APP_前缀，即REACT_APP_MYCREDENTIALS）。

3. 登录状态判断逻辑完全错误 #

if ('accessToken')这个条件永远为true，因为非空字符串在布尔判断里是true，不管response有没有accessToken字段，都会进入成功分支。
修复：改为判断response是否存在且包含accessToken：

if (response?.accessToken) {
    // 成功逻辑
} else {
    // 失败逻辑
}

4. SweetAlert调用参数错误（报错直接诱因） #

当登录失败进入else分支时，response是undefined（因为loginUser没返回），response.message就是undefined，传给SweetAlert的第二个参数不符合要求。
修复：先确保response有值，再读取message，或者给默认值：

swal("Failed", response?.message || "登录失败，请重试", "error");

5. 其他潜在问题 #

• useStyles未导入：代码里用了const classes = useStyles();但没看到导入语句，需要补充import { useStyles } from './你的样式文件路径';或者删除无用的classes变量。
• useState初始值未设置：useState()默认是undefined，建议设为空字符串，避免表单初始值异常：

const [username, setUserName] = useState('');
const [password, setPassword] = useState('');

修复后的完整handleSubmit示例 #

const handleSubmit = async e => {
    e.preventDefault();
    const response = await loginUser({
        username,
        password
    });

    if (response?.accessToken) {
        swal("Success", {
                buttons: false,
                timer: 1000,
            })
            .then(() => {
                localStorage.setItem('accessToken', response.accessToken);
                localStorage.setItem('user', JSON.stringify(response.user));
                window.location.href = "/profile";
            });
    } else {
        swal("Failed", response?.message || "登录失败，请重试", "error");
    }
}

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