React同文件调用async方法removeCouponCode提示未定义如何解决

核心报错原因 #

你当前直接调用removeCouponCode会报未定义，本质原因是该方法不是全局/顶层独立函数，是和redemptionCode同属一个对象的成员方法，同对象内部调用必须加this.前缀才能访问到。

附带的传参错误 #

你调用时的传参写法也存在问题：

• 你定义removeCouponCode时接收的参数是解构的单个对象：async removeCouponCode({ ...otherParams })
• 但你调用时写的removeCouponCode(...otherParams)会把对象展开成多个零散参数传入，和定义的参数结构不匹配，会导致后续取值异常。

修复步骤 #

第一步：调整调用写法 #

把报错行的代码修改为：

await this.removeCouponCode(otherParams)

注意要加await，因为removeCouponCode是异步方法，不加的话会触发Promise未捕获的潜在问题

第二步：确保this指向正确 #

如果修改后出现this指向报错，可以根据你的方法所属场景选对应方案：

• 如果是类组件的成员方法：把方法定义改成箭头函数形式，或者在组件constructor里绑定this.redemptionCode = this.redemptionCode.bind(this)
• 如果是普通JS对象里的方法：确保调用redemptionCode时是通过对象调用的，比如actions.redemptionCode()，不要单独把方法提出来调用

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