Converting circular structure to JSON --> starting at object with constructor 'HTMLButtonElement' | property '__reactFiber$eb3i9glrsyt' -> object with constructor 'FiberNode' --- property 'stateNode' closes the circle TypeError: Converting circular structure to JSON --> starting at object with constructor 'HTMLButtonElement' | property '__reactFiber$eb3i9glrsyt' -> object with constructor 'FiberNode' --- property 'stateNode' closes the circle at JSON.stringify (<anonymous>) at CellClickModal (http://localhost:3001/static/js/bundle.js:2809:20) at renderWithHooks (http://localhost:3001/static/js/bundle.js:65440:22) at updateFunctionComponent (http://localhost:3001/static/js/bundle.js:68322:24) at beginWork (http://localhost:3001/static/js/bundle.js:70034:20) at HTMLUnknownElement.callCallback (http://localhost:3001/static/js/bundle.js:55032:18) at Object.invokeGuardedCallbackDev (http://localhost:3001/static/js/bundle.js:55076:20) at invokeGuardedCallback (http://localhost:3001/static/js/bundle.js:55133:35) at beginWork$1 (http://localhost:3001/static/js/bundle.js:75007:11) at performUnitOfWork (http://localhost:3001/static/js/bundle.js:74254:16)
时间: 2024-01-27 12:05:52 浏览: 23
这个错误是因为你正在尝试将一个包含循环引用的对象转换成JSON字符串,而JSON.stringify()方法不支持循环引用。在你的代码中,HTMLButtonElement对象和FiberNode对象之间存在循环引用,因此无法转换成JSON字符串。
要解决这个问题,你可以使用第三方库如flatted来处理包含循环引用的对象。flatted是一个支持循环引用的JSON.stringify()和JSON.parse()版本的库,它可以将循环引用的对象转换成字符串,并在解析时还原循环引用。
以下是使用flatted库的示例代码:
```jsx
import flatted from 'flatted';
const myObj = {
button: document.querySelector('button'),
fiber: { stateNode: document.body }
};
const jsonString = flatted.stringify(myObj);
console.log(jsonString);
const myObj2 = flatted.parse(jsonString);
console.log(myObj2);
```
在这个示例中,我们使用flatted.stringify()方法将包含循环引用的对象转换成字符串,然后使用flatted.parse()方法将字符串解析成对象。这样可以避免JSON.stringify()方法的循环引用问题。
相关问题
Converting circular structure to JSON --> starting at object with constructor 'Object'
"Converting circular structure to JSON"错误通常发生在尝试将包含循环引用的对象转换为JSON字符串时。循环引用是指对象之间存在相互引用的情况,导致无限递归。JSON序列化器无法处理这种循环引用,因此会抛出该错误。
解决此问题的一种方法是在序列化之前删除循环引用。可以使用第三方库`circular-json`来处理循环引用。以下是一个示例代码:
```javascript
const CircularJSON = require('circular-json');
const obj = {};
obj.circularRef = obj;
const jsonString = CircularJSON.stringify(obj);
console.log(jsonString);
```
在上面的示例中,我们使用`circular-json`库将包含循环引用的对象转换为JSON字符串。通过将循环引用删除,我们可以成功地将对象转换为JSON字符串。
socket.io-client Converting circular structure to JSON --> starting at object with constructor
The error "Converting circular structure to JSON" occurs when you are trying to stringify an object that contains circular references, meaning there is a loop in the object's structure. JSON does not support circular references, so when you try to convert such an object to JSON, you will encounter this error.
To resolve this issue, you need to identify and break the circular reference in your object before converting it to JSON. One approach is to remove or replace the circular reference with a placeholder value or an identifier that can be restored later.
In the case of `socket.io-client`, the circular reference error can occur if you are trying to emit or send an object that contains circular references through a socket. You can use the `JSON.stringify` method with a replacer function to handle circular references:
```javascript
const circularReplacer = () => {
const seen = new WeakSet();
return (key, value) => {
if (typeof value === "object" && value !== null) {
if (seen.has(value)) {
return;
}
seen.add(value);
}
return value;
};
};
const jsonString = JSON.stringify(yourObject, circularReplacer());
```
This replacer function uses a `WeakSet` to keep track of visited objects and ignores circular references by returning undefined for them.
Make sure to apply this replacer function to your object before sending it through `socket.io-client`.