微信小程序中同时存在两个 input 组件就会报渲染层错误[渲染层错误] Uncaught in promise Error object null is not iterable
微信小程序中同时存在两个 input 组件就会报渲染层错误[渲染层错误] Uncaught in promise Error object null is not iterable
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Mac | 15.1.1 | CLI |
示例代码:
<template>
<view>
<input
v-model="mobile"
type="text"
<input
v-model="password"
password
</view>
</template>
<script>
export default {
data() {
return {
mobile: '',
password: '',
}
},
}
</script>
操作步骤:
只需要在组件里面同时放入两个 input 组件就可以了。
预期结果:
不报错
实际结果:
[渲染层错误] Uncaught (in promise) Error: object null is not iterable (cannot read property Symbol(Symbol.iterator))(env: macOS,mp,1.06.2503300; lib: 3.8.8) [渲染层错误] Error: SystemError (webviewScriptError) object null is not iterable (cannot read
bug描述:
在做一个账密登录组件,页面同时引入了两个 Input,只要同时组件里面有两个 Input 组件就会微信开发者工具报渲染层错误。
hello , 我这里尝试运行了,没有发现这个报错,可能是其它原因影响的,你可以提供一下可以复现的项目吗?
我也遇到这个相同的问题,问题截图提在这个问题的回答里了
注释掉input剩下一个input这个错误就被消除了
我尝试了用最新的 uniapp 版本^2.0.2-4060620250520001 去尝试重新这个问题是没有,但是我这个2.0.2-4020420240722003,确实是能稳定复现这个问题。就是一个组件内不能同时存在两个 Input
不需要两个input 一个都报错 只要基础库是3.8.0以上
解决没有,大佬,不知道是哪里出问题,我这个就是一个登录界面,进来什么操作也没有做也出现这个相同的问题
项目技术栈:根据文档使用vue-cli 创建的 uni-app vue3项目,编译之后使用微信开发者打开
方便发一下你这个项目吗?或者新建一个看一下能不能够复现
回复 DCloud_UNI_yuhe: 项目发在下面回答里面了
回复 DCloud_UNI_yuhe: 这个问题应该是调试基础库版本导致的,将版本调低一点,就可以解决,版本过高就会出现这种
我这边是一个之前创建的 vue2 的项目,现在使用的 Uniapp 版本是2.0.2-4020420240722003。如果只有一个 input 组件是没问题的,有两个就会报错。尝试了修改两个 input 的类型什么的,都没用,只能注释一个保留一个才可以。
提供一下可以复现的项目
上传附件了,使用pnpm install 安装依赖 ,pnpm run dev:mp-weixin 编译微信,编译之后打开就是上述的问题
看一下我的评论,看一下基础库版本,微信开发者工具的版本,和你的一样吗?
回复 DCloud_UNI_yuhe: 我更新一下开发者工具尝试一下
我尝试运行了这个项目,并且 微信开发者工具更新到了 1.06.2503300 也是没有复现这个报错的
去尝试了一下如果把调试基础库降级到 3.8.0或者 3.7 版本是不报错的,但是一旦升级到 3.8.6 及以上就会出现上述错误。
回复 p***@163.com: 运行的这个是 3.8.8 了 ,并且其它版本也试过了,这个错误我这里没有,可能还得需要其它线索
基础库版本和微信开发者工具版本截图
基础库3.8.0以上都会报这个错误!3.8.0及以下不会报错
刚刚用你说的这个,确实因为这个原因
我的项目是vue2.0的
更新开发者工具后,仍然出现这个报错
在调试过程中发现如果不填写小程序Appid,什么版本也不会报错!只要填写Appid,3.8.0以上必报错!使用了uview的u-input!真是一个高级错误!
【这个错误不影响功能】,如果不想看见,只需改变开发者工具里面的基础调试库,降低到【3.8.0版本及以下】
请问除了降基础库外,还有其他的解决方法吗
这个应该是开发者工具的 bug,不影响开发的
确实,微信开发工具版本3.8.0以上会有这个bug,看着这个报错很难受,所有换成3.8.0吧
这个问题是由于微信小程序基础库版本与 uni-app 框架兼容性导致的常见错误。在你的代码中,两个 input 组件缺少了闭合标签的斜杠 /
,正确的写法应该是:
<input v-model="mobile" type="text" />
<input v-model="password" password />
解决方案:
- 修复标签语法:确保所有 input 标签正确闭合
- 检查基础库版本:在微信开发者工具中,将基础库版本调整到 2.21.0 以上或 3.0.0 以下,避开有问题的版本范围
- 更新开发环境:升级 HBuilderX 到最新版本,确保 uni-app 编译器为最新
- 清理缓存:删除
unpackage
、node_modules
目录,重新安装依赖
临时规避方案: 如果问题仍然存在,可以暂时用条件渲染分开两个 input:
<input v-if="showMobile" v-model="mobile" type="text" />
<input v-if="!showMobile" v-model="password" password />