微信小程序报错Setting data field "XXXXX" to undefined is invalid.点击事件不好用。

首先,我现在想要做的事情是点击切换界面(竖版的tab):在这里插入图片描述
大家看到的Mon、Tue等文字,被我放在了一个view标签之中,这个时候出现了一个问题,当我点击这个view的时候,点击事件失效了,那么我们来看一下代码:在这里插入图片描述
js代码:在这里插入图片描述
这里的js代码意思是,当点击事件发生的时候,将没发生点击事件前的index的值(currentDaysIndex的值)变为发生点击事件的源头的index值。
按理说这样的操作时没毛病的,那么我们再来看一下我的错误信息咯:在这里插入图片描述
这里能看得到,在我点击文字view时,报出的错误是VM2121:1 Setting data field “currentDaysIndex” to undefined is invalid. 说明在js的点击事件函数中,没有取到当前的index导致无法赋予给我currentDaysIndex正确的index,之后系统给赋予了一个值undefined。
那么这个时候我就到我的wxml文件中重新找问题,并且和我之前写过的tab导航进行对比,随后我添加了一个data-index=’{{index}}’在这里插入图片描述
问题,就解决啦在这里插入图片描述
console面板上也没有报错啦
在这里插入图片描述
*那么我当然不能就这样改好了就算了,为什么会出现这个错误呢,是因为没弄清楚,或者说根本不知道传值是怎么肥四,所以,下面还得来说一说利用data-这种传值方式。

data-* 属性可为任何类型,与HTML5的data-* 相同,可用来为组件设置任意的自定义属性值,当组件上绑定的时间触发时,这些自定义属性将作为参数发给事件处理函数(在wxml文件里定义data-*,当我们触发其对应的事件后,data-*的值会发给写在js文件里对应的事件处理函数),在事件处理函数中可通过传入参数对象的currentTarget.dataset方式来获取自定义属性值。

以我的代码为例:在这里插入图片描述
利用检查工具,这里可以看到,我定义的data-index的被写在wxml文件之中(data-后面的那个名字可以随便起,data-小王八也不是不行啊嘻嘻嘻),那么我们来看一下,我现在的选中的是,data-index为3的view,现在我们来点击一下data-index为5的view
在这里插入图片描述在这里插入图片描述
看一下console面板是怎么给出的:在这里插入图片描述
那么这个数据是怎么传递的呢?就是我们上面说到的data-*的用法咯,在js文件中利用currentTarget.dataset完成的鸭
在这里插入图片描述
把这些都弄清楚真的太开心了,嘻嘻嘻,希望能帮到大家。写的虽然很凌乱,但是我会继续进步的。

另:今天听了一首尚东峰的歌,名字叫《生活又不是热血动漫》,好听,推荐给大家。借用里面一句话,“生活又不是热血动漫,你有没有主角光环”,既然大家都没有主角光环,何不做彼此的配角,让生活这出戏演的更出彩呢,好好加油吧。

在小程序中遇到提示"Setting data field 'ddzt' to undefined is invalid"通常意味着你试图将数据对象(data)中的某个字段设置为undefined,而在小程序的数据绑定机制中,这通常是不被允许的。这是因为小程序的数据绑定系统期望数据对象中的每个字段都是一个可以正确显示的值,而不允许为undefined或null。 要解决这个问题,你需要确保在设置数据字段的值之前,该字段不会被赋值为undefined。下面提供了一些可能的解决步骤: 1. 检查赋值操作:仔细检查你的代码,特别是在数据更新的地方。确保在将'ddzt'字段赋值时没有直接或间接将其设置为undefined。 2. 使用默认值或条件判断:如果'ddzt'字段需要根据某些条件来赋值,确保在条件不满足时提供一个合适的默认值,而不是undefined。例如,可以使用三元运算符来实现: ```javascript data: { ddzt: '默认值' // 初始化一个默认值 }, // 在某处设置ddzt this.setData({ ddzt: condition ? '需要的值' : '默认值' }); ``` 3. 使用可选链(Optional Chaining):如果你不确定某个深层嵌套的属性是否存在,可以使用可选链来避免在获取值时出现undefined。例如: ```javascript this.setData({ ddzt: someObject?.nested?.property ?? '默认值' }); ``` 这里`someObject?.nested?.property`尝试访问`someObject`对象中`nested`属性里的`property`,如果在访问过程中某个属性不存在,则表达式的结果为undefined,后面的`?? '默认值'`则会提供一个默认值。 4. 检查是否有清除数据的逻辑:如果你的页面或组件中有逻辑用于重置或清除数据,请确保在清空'ddzt'字段时,也为其提供一个有效的默认值。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值