VM1374:32未捕获的TypeError:将圆形结构转换为JSON(…) [英] VM1374:32 Uncaught TypeError: Converting circular structure to JSON(…)

问题描述

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

I am new to JS. I am trying to print the values in my console.log. I am getting the below error:

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]));

推荐答案

这是一个非常普遍的问题.抛出Converting circular structure to JSON(...)的原因是，您试图打印出最终通过其属性之一引用其自身的对象.

This is a pretty common problem. Converting circular structure to JSON(...) is thrown because you're trying to print out an object that eventually references itself through one of its properties.

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

Here's a JSFiddle of one of the simplest ways you can get this issue:

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.b设置为a本身时，我们现在得到了这种树:

When you call JSON.stringify, the browser will traverse your object like a big tree, going down each property like a branch and converting what it can into a string. In the example above, the property b at first is null, which results in a successful "stringification". When we set a.b to a itself, we now get this sort of tree:

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

这种结构是 circular ，因为对象引用了自身.无法将其编写为JSON，因为它将永远存在，因此会引发错误.

The structure is circular in this way because the object references itself. There's no way to write that as JSON because it would go on forever, so an error is thrown.

对于您的特定问题，这是在React中发生的，因为React对象引用了他们的父母，后者引用了他们的孩子，又引用了他们的父母，又引用了他们的孩子...它永远存在.

For your specific problem, this is happening in React because the React objects reference their parents, which reference their children, which reference their parents, which reference their children... it goes on forever.

因此，由于这个原因，您不能在示例中的this或this.props上使用JSON.stringify(this.props具有属性children，部分负责此问题).

So you can't use JSON.stringify on this or this.props in your example for this reason (this.props has the property children that is partly responsible for the issue).

您会注意到，您可以将this.state字符串化，因为这是一个普通对象，不会引用任何其他React对象:

You will notice that you can stringify this.state, as that's a normal object that doesn't reference any other React objects:

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

最适合您的是仅console.log而没有JSON.stringify:

What may be best for you is to just console.log without JSON.stringify:

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

您可以在console.log中添加多个参数，并用逗号分隔它们，然后浏览器控制台本身应以可见格式打印它.

You can add multiple arguments to console.log and separate them with commas, then the browser console itself should print it in a viewable format.

这篇关于VM1374:32未捕获的TypeError:将圆形结构转换为JSON(…)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！