微信小程序使用循环引用的对象报错

TStoneLee commented 3 years ago

问题描述 开发vue组件时，需要在data函数函数中使用循环引用的对象，在小程序端会报错 复现步骤 [复现问题的步骤]

在data中添加循环引用的对象，进行双向绑定 预期结果 可以使用循环引用的对象 实际结果 报错信息： TypeError: Converting circular structure to JSON --> starting at object with constructor 'e' | property 'fields' -> object with constructor 'Array' | index 0 -> object with constructor 'e' --- property 'form' closes the circle at JSON.stringify () at bi (mp.runtime.esm.js:5620) at o.Ai [as patch] (mp.runtime.esm.js:5633) at o.e._update (mp.runtime.esm.js:3959) at o.n (mp.runtime.esm.js:5701) at Tn.get (mp.runtime.esm.js:4419) at Tn.run (mp.runtime.esm.js:4494) at wn (mp.runtime.esm.js:4250) at Array. (mp.runtime.esm.js:1984) at Ct (mp.runtime.esm.js:1912)(env: macOS,mp,1.05.2110110; lib: 2.20.1) Ai @ mp.runtime.esm.js:5635

系统信息:

发行平台: 微信小程序
操作系统 iOS 12.1.2
uni-app版本 uni-app v3.1.22 uni-app cli v2.0.0-31920210709003

Environment Info:

System: OS: macOS 11.2.3 CPU: (8) x64 Apple M1 Binaries: Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node Yarn: 1.22.10 - ~/.nvm/versions/node/v15.14.0/bin/yarn npm: 7.7.6 - ~/.nvm/versions/node/v15.14.0/bin/npm Browsers: Chrome: 95.0.4638.69 Firefox: Not Found Safari: 14.0.3 npmPackages: @dcloudio/types: => 2.3.3 @dcloudio/uni-app-plus: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-app-plus-nvue: 0.0.1 @dcloudio/uni-app-plus-nvue-v8: 0.0.1 @dcloudio/uni-automator: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-cli-shared: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-h5: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-helper-json: => 1.0.13 @dcloudio/uni-i18n: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-migration: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-mp-360: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-mp-alipay: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-mp-baidu: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-mp-kuaishou: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-mp-qq: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-mp-toutiao: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-mp-vue: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-mp-weixin: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-quickapp-native: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-quickapp-webview: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-stat: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-template-compiler: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/uni-ui: ^1.3.7 => 1.3.7 @dcloudio/vue-cli-plugin-hbuilderx: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/vue-cli-plugin-uni: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/vue-cli-plugin-uni-optimize: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/webpack-uni-mp-loader: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @dcloudio/webpack-uni-nvue-loader: 0.0.1 @dcloudio/webpack-uni-pages-loader: ^2.0.0-31920210709003 => 2.0.0-31920210709003 @hap-toolkit/dsl-vue: 0.6.13 @vue/babel-helper-vue-jsx-merge-props: 1.2.1 @vue/babel-helper-vue-transform-on: 1.0.2 @vue/babel-plugin-jsx: 1.0.6 @vue/babel-plugin-transform-vue-jsx: 1.2.1 @vue/babel-preset-app: 4.5.13 @vue/babel-preset-jsx: 1.2.4 @vue/babel-sugar-composition-api-inject-h: 1.2.1 @vue/babel-sugar-composition-api-render-instance: 1.2.4 @vue/babel-sugar-functional-vue: 1.2.2 @vue/babel-sugar-inject-h: 1.2.2 @vue/babel-sugar-v-model: 1.2.3 @vue/babel-sugar-v-on: 1.2.3 @vue/cli-overlay: 4.5.13 @vue/cli-plugin-babel: ~4.5.0 => 4.5.13 @vue/cli-plugin-router: 4.5.13 @vue/cli-plugin-vuex: 4.5.13 @vue/cli-service: ~4.5.0 => 4.5.13 @vue/cli-shared-utils: 4.5.13 @vue/component-compiler-utils: 3.2.2 (3.2.2) @vue/preload-webpack-plugin: 1.1.2 @vue/shared: ^3.0.0 => 3.1.5 @vue/web-component-wrapper: 1.3.0 mpvue-page-factory: 1.0.1 mpvue-template-compiler: 1.0.13 uni-h5-vue: 2.6.10 uni-mp-vue: 2.6.10 vue: ^2.6.11 => 2.6.14 vue-hot-reload-api: 2.3.4 vue-loader: 15.9.7 (16.3.1, 15.9.7) vue-router: 3.0.1 vue-style-loader: 4.1.3 (4.1.3) vue-template-compiler: ^2.6.11 => 2.6.14 (2.6.14) vue-template-es2015-compiler: 1.9.1 vuex: ^3.2.0 => 3.6.2 npmGlobalPackages: @vue/cli: 4.5.13

补充信息 源码部分，此函数cloneWithData使用了JSON.parse(JSON.stringfy())来克隆数据，这部分可以修改吗？

zhetengbiji commented 3 years ago

底层不支持，只支持传输可 JSON 序列化的数据

everlose commented 2 years ago

同样遇到这个问题了，uniapp 编译去小程序环境就会出现。调试也是这

源码部分，此函数cloneWithData使用了JSON.parse(JSON.stringfy()) 爆出来的。

我最后解决了，我发现这个问题是因为我往 vue 这个实例上挂载了一个对象，这个对象是继承自 eventEmitter3 的一个对象，所以无法被 JSON.parse(JSON.stringfy()) 转换。建议把数据挂载去 uniapp 提供的 state 上。

TStoneLee commented 2 years ago

同样遇到这个问题了，uniapp 编译去小程序环境就会出现。调试也是这

源码部分，此函数cloneWithData使用了JSON.parse(JSON.stringfy()) 爆出来的。

我最后解决了，我发现这个问题是因为我往 vue 这个实例上挂载了一个对象，这个对象是继承自 eventEmitter3 的一个对象，所以无法被 JSON.parse(JSON.stringfy()) 转换。建议把数据挂载去 uniapp 提供的 state 上。

请问这个state指的是Vuex？我之前试过，也是会报错

dcloudio / uni-app

微信小程序使用循环引用的对象报错 #2980