【前端】报错TypeError: Cannot create property ‘xxx‘ on string ‘xxx‘

布熬夜了

已于 2022-11-16 17:53:46 修改

阅读量1.3w

点赞数 7

分类专栏：前端开发文章标签： javascript vue.js 开发语言

于 2022-08-06 09:03:51 首次发布

本文链接：https://blog.csdn.net/CatalpaWoo/article/details/126189212

版权

前端开发专栏收录该内容

22 篇文章 3 订阅

订阅专栏

博客内容讲述了在前端开发中遇到的一个错误，即在遍历数组并根据条件给数据添加属性时出现赋值类型错误。问题出在使用了错误的遍历语法，`for...in` 会遍历对象的所有属性，包括数组的索引和原型链上的属性。正确做法是使用 `for...of` 循环，它只遍历数组的元素。代码示例中展示了如何修正这个问题，避免对非预期的对象进行赋值操作。

摘要由CSDN通过智能技术生成

报错原因分析：赋值的类型错误

前端在遍历时通过判断条件为数据添加属性时报错，在重新查看代码时发现为遍历语句错误。

for (let item in list) {}
for (let item of list) {}

二者的不同之处在于，前者在遍历数组时若数组下存在属性，则会对属性也进行遍历操作，故报赋值的类型错误问题。

详细代码如下：

handelData(data) {
	selectDeclarePlan(data.map(item => { return item.guid })).then(res => {
		if (res.code === 1) {
			this.loading = false;
			let monthData = res.data;
			for (let yearItem of data) {
				// 是否存在申报计划
				if (monthData.filter(item => item.planYearGuid === yearItem.guid).size != 0) {
					yearItem.tip = '此年度计划已存在申报计划';
				}
		} else {
			this.loading = false;
			this.$message.error(res.message);
		}
	}).catch(error => {
		this.loading = false;
		this.$message.error(error);
	})
},