wangEditor 上传图片,回调函数 Cannot read properties of undefined

请看我的代码:

          editor.config.uploadImgHooks = {
              // 上传图片之前
              before:function(xhr){
				  console.log(this.state.goodsguid);
              },
	       }

 对于这样的代码,会不会报错,

当我们上传图片的时候,出现了这样错误:

×

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'goodsguid')

 凭借多年的代码经验可以判断在wangEditor的上传回调中:

before:function(xhr){

          this.state.goodsguid

}

这个里面的this 到底是指向谁的,before,before 上父级,还是我们的组件,出现上面的报错明显是认为这个this指向的是组件,但是出现报错,说明我们的认为是错误的,此处我们不妨打印出来看一下:

这个地方的this 是before,before是一个回调的函数,本上并不我们想象的组件

如何在回调的函数中可以使用 this 并且this 指向的是组件

我们可以用箭头函数的方式来解决:

这样来写:

     editor.config.uploadImgHooks = {
              // 上传图片之前
              before:()=>{
				  console.log(this);
              },
	  }

 然后我们再输出this 结果如下:

这个时候this 指向的是组件,既然指向我们的组件,那么我们就可以使用成员变量了

上面我们通过对回调函数的书写方式的变化,this 指向不同的对象,解决了报错的问题

希望对你有所帮助

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
"Cannot read properties of undefined"是JavaScript中常见的错误,它表示尝试访问未定义或空值的属性。这通常发生在以下情况下: 1. 对象未正确初始化或赋值。 2. 对象不存在或已被删除。 3. 对象属性拼写错误或不存在。 以下是两个例子来说明这个错误的原因和解决方法: 1. 报错元素的前一个元素出了问题,也就是this.option没有获取到。 ```javascript // 示例代码 var obj = { option: { value: 10 } }; console.log(obj.option.value); // 正确访问属性值 console.log(obj.option2.value); // 报错:Cannot read properties of undefined ``` 在这个例子中,`obj`对象的`option`属性被正确定义和赋值,因此可以访问`option.value`属性。但是,当我们尝试访问`option2.value`属性时,由于`option2`属性未定义,会导致报错。 2. 在项目中,想要获取鼠标的元素,红色区域报错:Cannot read properties of undefined (reading 'grid3D')。 ```javascript // 示例代码 var element = document.getElementById('red-area'); console.log(element.grid3D); // 报错:Cannot read properties of undefined ``` 在这个例子中,我们尝试通过`document.getElementById`方法获取具有`id`为`red-area`的元素。然而,如果该元素不存在或未正确加载,尝试访问其属性`grid3D`时会导致报错。 解决这个错误的方法包括: - 确保对象或元素已正确初始化和赋值。 - 检查对象或元素是否存在或已被删除。 - 检查属性拼写是否正确,并确保属性存在。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值