字符串PROP傳遞給從父反應子組件 - 無法CONVER與JSON.parse（）來

Question

問題摘要到對象：

陣營部件SLTree讀取（AJAX）一個JSON，轉換爲字符串，並 其傳遞作爲兩個'包含'組件的財產 - 編輯和 TNode。編輯器組件（它封裝了CodeMirror）工作正常，但接收到的屬性 的JSON.parse（）後的TNode組件事件仍然將返回的對象解釋爲字符串而不是Object。

JSON文件（驗證）：

"x": { 
      "id": 1, 
      "content": "Hello, world!\n" 
     }, 
"y": { 
      "id": 2, 
      "content": "React is awesome.\n" 
     }, 
"z": { 
      "id": 3, 
      "content": "Robots are pretty cool.\n" 
     }, 
"l": { 
      "id": 4, 
      "content": "Monkeys.\nWho doesn't love monkeys?\n" 
     } 
} 

反應的組分：

• 家長：SLTree
• 兒童（使用JQuery AJAX上述JSON讀取）：編輯 - 正常工作）
• TNode - 無法'對象'化傳遞的字符串屬性。
  • JSON.parse（丙傳入由父）
  • JSON.parse（JSON.stringify（丙傳入由父）） - 上 一些答案使用明確的字符串化計算器建議，解析之前

一些參考標明明確做解析之前，字符串化。 所以我也嘗試：

let expectObj_gettingString = JSON.parse(JSON.stringify(this.props.node))

代碼父組件 - SLTree：

import Editor from './Editor.jsx'; 
import TNode from './TNode.jsx';  
var $ = require('jquery'); 
const lstyle = { 
    border: "solid navy 1px" 
} 
export default React.createClass({ 

    getInitialState: function() { 
    return { 
     displayText: '' 
    } 
    }, 
    componentDidMount: function() { 
    this.serverRequest = $.ajax({ 
     url: "./sltree/sample.json", 
     dataType: 'json', 
     cache: false, 
     success: function(data) { 
     console.log(data); 
     this.setState({displayText: JSON.stringify(data, null, ' ')}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     // console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 
    componentWillUnmount: function() { 
    this.serverRequest.abort(); 
    }, 
    render() { 
    return (
     <div className="row"> 
     <div style={lstyle} className="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
      <Editor displayText={this.state.displayText} /> 
     </div> 
     <div style={lstyle} className="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
      <TNode node={this.state.displayText} /> 
     </div> 
     </div> 
    ) 
    } 
}); 

編輯器組件正常工作。下面

TNODE組件未能this.props.node轉換爲JSON 對象 - 並保持其解釋爲一個字符串 - 如明顯從下面 控制檯日誌和顯示器上的瀏覽器（這裏未示出）

import React from 'react'; 
import ReactDOM from 'react-dom'; 
var $ = require('jquery'); 

export default React.createClass({ 
    render() { 
    let n = this.props.node; 
    console.log("node type:("+ typeof n + ")") 
    let s = ""; 
    for (var k in n) { 
     s += k + " : " + n[k] + " : typeof n[k]("+typeof n[k]+")\n"; 
     console.log(s); 
    } 
    return (
     <div>{s}</div> 
    ); 
    } 
}); 

下面是示例控制檯日誌 - 請注意「節點」如何解釋爲字符串而不是對象。請注意，索引（鍵）是整數，值是字符串中的字符。

node type:(string) 
bundle.js:70 document ready in sltree/main.js: dependencies loaded. 
bundle.js:20470 Object {x: Object, y: Object, z: Object, l: Object}l: Objectcontent: "Monkeys.↵Who doesn't love monkeys?↵"id: 4__proto__: Objectx: Objectcontent: "Hello, world!↵"id: 1__proto__: Objecty: Objectz: Object__proto__: Object 
bundle.js:41476 node type:(string) 
bundle.js:41480 0 : { : typeof n[k](string) 

bundle.js:41480 1 : 
: typeof n[k](string) 

bundle.js:41480 2 : : typeof n[k](string) 

bundle.js:41480 3 : " : typeof n[k](string) 

bundle.js:41480 4 : x : typeof n[k](string) 

bundle.js:41480 5 : " : typeof n[k](string) 

bundle.js:41480 6 : : : typeof n[k](string) 

bundle.js:41480 7 : : typeof n[k](string) 

bundle.js:41480 8 : { : typeof n[k](string) 

bundle.js:41480 9 : 
: typeof n[k](string) 

bundle.js:41480 10 : : typeof n[k](string) 

bundle.js:41480 11 : : typeof n[k](string) 

bundle.js:41480 12 : " : typeof n[k](string) 

bundle.js:41480 13 : i : typeof n[k](string) 

bundle.js:41480 14 : d : typeof n[k](string) 

bundle.js:41480 15 : " : typeof n[k](string) 

bundle.js:41480 16 : : : typeof n[k](string) 

bundle.js:41480 17 : : typeof n[k](string) 

bundle.js:41480 18 : 1 : typeof n[k](string) 

bundle.js:41480 19 : , : typeof n[k](string) 

bundle.js:41480 20 : 
: typeof n[k](string) 

bundle.js:41480 21 : : typeof n[k](string) 

bundle.js:41480 22 : : typeof n[k](string) 

bundle.js:41480 23 : " : typeof n[k](string) 

bundle.js:41480 24 : c : typeof n[k](string) 

bundle.js:41480 25 : o : typeof n[k](string) 

bundle.js:41480 26 : n : typeof n[k](string) 

bundle.js:41480 27 : t : typeof n[k](string) 

bundle.js:41480 28 : e : typeof n[k](string) 

bundle.js:41480 29 : n : typeof n[k](string) 

bundle.js:41480 30 : t : typeof n[k](string) 

bundle.js:41480 31 : " : typeof n[k](string) 

bundle.js:41480 32 : : : typeof n[k](string) 

bundle.js:41480 33 : : typeof n[k](string) 

bundle.js:41480 34 : " : typeof n[k](string) 

bundle.js:41480 35 : H : typeof n[k](string) 

bundle.js:41480 36 : e : typeof n[k](string) 

bundle.js:41480 37 : l : typeof n[k](string) 

bundle.js:41480 38 : l : typeof n[k](string) 

bundle.js:41480 39 : o : typeof n[k](string) 

bundle.js:41480 40 : , : typeof n[k](string) 

bundle.js:41480 41 : : typeof n[k](string) 

bundle.js:41480 42 : w : typeof n[k](string) 

bundle.js:41480 43 : o : typeof n[k](string) 

bundle.js:41480 44 : r : typeof n[k](string) 

bundle.js:41480 45 : l : typeof n[k](string) 

Answer 1

我認爲這個問題可能來自這條線：

this.setState({displayText: JSON.stringify(data, null, ' ')});

當您收到前端在這條線從AJAX調用數據時，它已經被JSON.stringified。通過再次對其進行字符串化，您將添加另一對引號，這意味着當您解析它時，它只會刪除該對，但不會將其解析回對象中。

嘗試： this.setState({displayText: data});

這將設置displayText是字符串化JSON。然後您需要在子組件中解析它。

你也可以這樣做：this.setState({displayText: JSON.parse(data)});

在這種情況下，數據將被解析並存儲在狀態作爲一個對象，應該可以訪問，因爲它是所有子組件。