VM1374：32 Uncaught TypeError：循環構造をJSON（...）に変換する

Question

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

Answer 1

これはかなり共通の問題です。最終的にそのプロパティの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がヌルになっています。その結果、「文字列化」が成功します。我々はaに自分自身をa.bを設定すると、私たちは今、木のこの種の取得：

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

を構造は、オブジェクト参照自体ので、このように円形です。永遠に続くので、JSONとして書く方法はありません。そのため、エラーがスローされます。

あなたの特定の問題については、Reactオブジェクトがその子を参照する親を参照しているため、これはReactで起こっています。

だから、（this.propsは、問題の原因の一部であるプロパティchildrenを持っている）このような理由のためにあなたの例ではthisまたはthis.propsにJSON.stringifyを使用することはできません。

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

編集：

あなたはそれだとあなたが文字列化this.stateは、他を参照していない通常のオブジェクトは、オブジェクトを反応させることができることがわかりますあなたがあるために最善のことができるものをせずにただconsole.logをしますJSON.stringify：

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

あなたはconsole.logに複数の引数を追加し、コンマでそれらを分離することができ、その後、ブラウザのコンソール自体は、それを印刷してください視認可能な形式で表示されます。