前端之路错误/报错/BUG大全

1、【undefined】​

（1）报错详情：Uncaught (in promise) TypeError: Cannot read property 'xxx' of undefined​

未捕获的的类型错误（in promise）：不能读取未定义的“xxx”属性

解决办法：找到出错的地方，使用try...catch嵌套该函数，如下图，实际代码不方便贴出，抱歉。

报错的原因：id为某一个对象的属性，该属性也是undefined的，其属性id自然也是不能读取到的。实际上我报错的那段代码在特定的情况下是不会报错的，该段代码是获取【某个地区】的【商品列表】的【id】，当获取了A地区但该地区并没有商品列表的时候，就会报错，但如果有数据的话是不会报错的。使用try...catch就是为了捕捉异常并做了空处理。

其他作者遇此问题的详情及解决方法：

①后端未遵守定义的开发规范，命名错误，作者：小生剧场，链接如下。

https://blog.csdn.net/qq_39598180/article/details/117819682?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164783103716780264081557%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164783103716780264081557&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-117819682.142%5Ev2%5Ees_vector_control_group,143%5Ev4%5Econtrol&utm_term=TypeError%3A+Cannot+read+property+id+of+undefined&spm=1018.2226.3001.4187

②异步请求未及时获取到数据/接口数据未返回就对数据进行操作，作者：大图书馆的牧羊人，链接如下。

https://blog.csdn.net/qwqc262/article/details/119916513

（2）与（1）基本相同的问题，没有报错，但是页面显示异常。（时间：2022.6.28）

异常详情：商品列表页面不显示商品列表，不过接口是正常返回数据了。

解决思路：在代码、接口等都正常的情况下，要考虑数据的问题。

解决方法：代码中有一个关于商品规格信息的循环，见修改前代码；但是部分商品的spec_info是空值或者为null，会报错。报错信息为Uncaught (in promise) TypeError: Cannot read property 'xxx' of undefined​。但实际上再控制台并没有产生这段报错，因为最外层有一个try catch捕捉了异常。但是这段修改前代码确实欠妥，存在null值时，循环会卡在这里，后面的代码无法执行，故需要在此处try catch一下，见修改后代码。

// 修改前
data.list.forEach((item) => {
    let spec_info2 = item.spec_info.toString().split('：')
    item.name = item.name + ' ' + spec_info2[spec_info2.length - 1]
})

// 修改后
data.list.forEach((item) => {
    try{
        let spec_info2 = item.spec_info.toString().split('：')
        item.name = item.name + ' ' + spec_info2[spec_info2.length - 1]
    } catch (error){
        }
})

总结：由此可见，当代码中嵌套属性过深时，要考虑使用try catch避免由null值等数据产生的报错/异常，如果在控制台并没有因为这段代码报错，要考虑是否因为外层的try catch捕捉了此处异常。外层捕捉没有用，要在此处单独进行try catch 捕捉。

2、【其他/暂未分类】

（1）a frame because it set 'X-Frame-Options' to 'sameorigin'.（时间：2022.6.28）

报错截图：

 这个问题的解决由服务器管理端进行修复，如果使用的服务器不是自己的而是买的或者别人做的，就无法修复这个问题，但是不影响使用。参考解决链接（作者：隔壁张同学）如下：

https://blog.csdn.net/zhangyang_2015/article/details/96482610?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-96482610-blog-118308342.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-96482610-blog-118308342.pc_relevant_paycolumn_v3&utm_relevant_index=2