字符串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)});

在这种情况下，数据将被解析并存储在状态作为一个对象，应该可以访问，因为它是所有子组件。