VM1374:32 未捕获的类型错误:将循环结构转换为 JSON(...)

IT技术 javascript jquery html json reactjs
2021-05-04 00:01:36

我是 JS 新手。我正在尝试在我的 console.log 中打印值。我收到以下错误:

VM1374:32 Uncaught TypeError: Converting circular structure to JSON(…)

我的代码如下:

console.log("this.props.children[this.state.selected]---->" + JSON.stringify(this.props.children[this.state.selected]));
1个回答

这是一个很常见的问题。Converting circular structure to JSON(...)被抛出是因为您试图打印出一个最终通过其属性之一引用自身的对象。

这是解决此问题的最简单方法之一的JSFiddle

var a = {
  b: null
};

// Prints fine
console.log(JSON.stringify(a, null, 3));

a.b = a;

// Throws an error, as a.b *is* a
console.log(JSON.stringify(a, null, 3));

当你调用 时JSON.stringify,浏览器会像一棵大树一样遍历你的对象,像一个分支一样向下遍历每个属性,并将它可以转换为字符串。在上面的示例中,该属性b最初为 null,这导致“字符串化”成功。当我们设置a.ba它自己时,我们现在得到这样的树:

a
|-b: a
     |-b: a
          |-b: a
               ...

这种结构是循环的,因为对象引用了自身。没有办法把它写成 JSON,因为它会永远持续下去,所以会抛出一个错误。

对于您的特定问题,这是在 React 中发生的,因为 React 对象引用了它们的父对象,这些对象引用了它们的子对象,它们引用了它们的父对象,哪个引用了它们的子对象……它永远持续下去。

所以你不能使用JSON.stringifythis或者this.props在您的示例因为这个原因(this.props有产权children是对这一问题的部分原因)。

你会注意到你可以stringify this.state,因为它是一个不引用任何其他 React 对象的普通对象:

> JSON.stringify(this.state);
"{"selected":0}"

编辑:对你来说最好的是console.log没有JSON.stringify

console.log("this.props.children[this.state.selected]---->", this.props.children[this.state.selected]);

您可以添加多个参数console.log并用逗号分隔它们,然后浏览器控制台本身应该以可查看的格式打印它。