微信小程序中同时存在两个 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 组件就会微信开发者工具报渲染层错误。


30 回复

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 了 ,并且其它版本也试过了,这个错误我这里没有,可能还得需要其它线索

回复 p***@163.com: 去微信社区反馈一下吧

基础库版本和微信开发者工具版本截图

基础库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 />

解决方案:

  1. 修复标签语法:确保所有 input 标签正确闭合
  2. 检查基础库版本:在微信开发者工具中,将基础库版本调整到 2.21.0 以上或 3.0.0 以下,避开有问题的版本范围
  3. 更新开发环境:升级 HBuilderX 到最新版本,确保 uni-app 编译器为最新
  4. 清理缓存:删除 unpackagenode_modules 目录,重新安装依赖

临时规避方案: 如果问题仍然存在,可以暂时用条件渲染分开两个 input:

<input v-if="showMobile" v-model="mobile" type="text" />
<input v-if="!showMobile" v-model="password" password />
回到顶部