TypeError: Converting circular structure to JSON
报错:
[Vue warn]: Error in nextTick: "TypeError: Converting circular structure to JSON--> starting at object with constructor 'Vue'| property '$options' -> object with constructor 'Object'| property 'router' -> object with constructor 'VueRouter'--- property 'app' closes the circle"
解析:
一般报错TypeError: Converting circular structure to JSON
是因为存在循环引用,并且使用JSON.stringify
方法去转化成字符串。下面举一个简单地例子:
报错代码
const x = { a: 8 }; const b = { x }; b.y = b; // 循环引用 JSON.stringify(b); // 触发报错
解决
const x = { a: 8 }; const b = { x }; b.y = JSON.parse(JSON.stringify(b)); // 隐式深拷贝,主要实现深拷贝,解除循环引用 JSON.stringify(b);
也可以不使用深拷贝,直接去掉循环引用的代码,问题的关键点是解除循环引用
本博文报错位置不能显式看到循环引用,因为循环引用的代码不是自己写的,而是框架代码自己实现的,因此发现问题的产生地方更难一点。经过大约一下午时间头都快爆炸了,终于看到了黎明曙光。发现产生问题的原因:
vuex
中的状态管理state中存储了router
实例(组件中获取的this.$route
),存在循环引用vuex
使用了插件vuex-persistedstate
state
中有了循环引用,插件vuex-persistedstate
要执行JSON.stringify
把state
数据转化成字符串然后存储到浏览器本地存储。接下来就是解决,那就是解除循环引用,解除办法就是对组件中获取的
this.$route
进行深拷贝,然后再存储到state
。/*** 获取数据类型* @param {All} [o] 需要检测的数据* @returns {String}*/ export function getType(o){return Object.prototype.toString.call(o).slice(8,-1); }/*** 判断是否是指定数据类型* @param {All} [o] 需要检测的数据* @param {String} [type] 数据类型* @returns {Boolean}*/ export function isKeyType(o, type) {return getType(o).toLowerCase() === type.toLowerCase(); }/*** 深拷贝,支持常见类型 object Date Array等引用类型* @param {Any} sth* @return {Any}*/ export function deepClone(sth) {let copy;if (null == sth || "object" != typeof sth) return sth;if (isKeyType(sth, 'date')) {copy = new Date();copy.setTime(sth.getTime());return copy;}if (isKeyType(sth, 'array')) {copy = [];for (let i = 0, len = sth.length; i < len; i++) {copy[i] = deepClone(sth[i]);}return copy;}if (isKeyType(sth, 'object')) {copy = {};for (let attr in sth) {if (sth.hasOwnProperty(attr)) copy[attr] = deepClone(sth[attr]);}return copy;}return null; }
深拷贝源码此项目包含很多前端通用方法。
TypeError: Converting circular structure to JSON相关推荐
- Uncaught TypeError: Converting circular structure to JSON
这个错误发生在使用 JSON.stringify() 方法将具有循环引用的对象转换为 JSON 时出现.循环引用是指一个对象引用它自己,或者两个或多个对象以循环方式相互引用.就比如以下代码: let ...
- vue 路由里关于 TypeError: Converting circular structure to JSON 报错问题
首先放上报错内容 TypeError: Converting circular structure to JSON –> starting at object with constructor ...
- 代码报错 Uncaught TypeError: Converting circular structure to JSON
报错内容 Uncaught TypeError: Converting circular structure to JSON--> starting at object with constru ...
- 解决TypeError: Converting circular structure to JSON
var cache = [];var aa = JSON.stringify(rowData, function(key, value) {if (typeof value === 'object' ...
- WEEX 报错 TypeError: Converting circular structor to JSON 的解决方法
背景 在进行千牛QAP插件开发的时候,有时会遇到 TypeError: Converting circular structor to JSON,并且看不到报错位置,对新手可能会造成疑惑. 原因 we ...
- Converting circular structure to JSON
Converting circular structure to JSON 这个问题是因为对象嵌套深度超过系统,一般都是对象相互引用 json转译为字符串,就一直循环下去. 这个是因为js对json对 ...
- Error: Converting circular structure to JSON解决方法
Cocos Creator做微信小游戏的时候点击按钮出现如下报错 VM76 WAGame.js:2 Error: Converting circular structure to JSON--> ...
- [解决]Converting circular structure to JSON
今天写一个递归时遇到了一个问题,类似于要把下面的这个数据: let arr = [{name:'a1',childs:[{name:'b1',child:null},{name:'c1',child: ...
- ‘Converting circular structure to JSON‘报错的解决方案
问题描述:项目中需要向后台传字符串,所以需要将对象转化, 但使用JSON.stringify(data)转化时出现了对象存在循环引用的bug,且无法找到是哪里拷贝有问题. 这里使用插件Circular ...
最新文章
- 经典网络VGGNet介绍
- 局部类的引用成员函数或虚函数必须进行定义
- python有道翻译接口-【Python】Python利用有道翻译开发API应用示例
- linux没有mysql.server,[linux]centos7下解决yum install mysql-server没有可用包
- ansys怎么批量输入点坐标_当SpaceClaim 遇上ANSYS (二)
- H3C认证无线互联网络专家
- 6-7 jmu-Java-07多线程-Thread (3分)
- easymock使用方法_EasyMock静态方法– PowerMock,JUnit 4,TestNG
- 数据库练习(1)——建立数据库
- Android开发屏幕适配
- php 内存设置无效,内存位置访问无效_php提示 内存位置访问无效 解决方法总结...
- 简述BSD协议和GPL协议的区别
- win10远程桌面 出现系统管理员已经限制你可以使用的登录类型(网络或交互式)
- Android蓝牙开发与串口蓝牙通讯
- 一.隐藏手机下面虚拟键盘(华为,魅族......)
- 工业相机及镜头的相关概念与相机及镜头的选型
- Spring面试专题
- Android Alpha 更改图片透明度
- Linux多线程——生产者消费者模型
- kestrel轻量级消息队列的安装