应用登录认证失败报validUser未定义TypeError错误该如何解决？

错误触发原因 #

• 核心报错TypeError: validUser is undefined来源于Array.find()方法的特性：匹配到符合条件的元素时会返回该元素本身，没有匹配到符合条件的元素时会返回undefined，当你输入的账号密码和users数组内预置的用户数据不匹配时，validUser就会是undefined
• 代码存在逻辑错误：你后续用validUser['length'] === 1做判断是完全错误的，find()返回的是单个用户对象不是数组，只有数组才有length属性，就算账号密码匹配成功，普通用户对象也不存在length属性，这个判断永远无法成立
• 最终报错是因为你尝试读取undefined的length属性，触发了类型错误

修复方案 #

直接修改判断逻辑即可，修复后的完整代码如下：

mock.onPost('/login').reply(function (config) {
    const user = JSON.parse(config['data']);
    const validUser = users.find(usr => usr.email === user.username && usr.password === user.password);
    return new Promise(function (resolve, reject) {
        console.log(validUser);
        setTimeout(function () {
            // 直接判断validUser是否存在即可，不需要判断length
            if (validUser) {
                resolve([200, validUser]);
            } else {
                reject({"message": "Username and password are invalid. Please enter correct username and password"});
            }
        });
    });
});

额外校验项 #

如果修改后依然登录失败，可以按顺序排查两个点：

• 打印user.username的值，确认前端提交的登录账号字段是否和你对比的usr.email字段逻辑匹配，避免字段映射错误
• 打印users数组的内容，确认预置的测试用户数据格式、字段是否符合预期

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