从 parent 传递给反应 child 组件的字符串道具 - 无法使用 JSON.parse() 转换为 Object

Question

问题总结：

React component SLTree reads (ajax) a JSON, converts to string and passes it as property to two 'contained' components - Editor and TNode. Editor component (which encapsulates CodeMirror) works OK, but the TNode component event after JSON.parse() of the received property keeps interpreting the returned object as a string, instead of 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"
        }
}

React 组件：

Parent：SLTree（使用 JQuery ajax 在 JSON 上面读取）
Child：编辑器 - 工作正常）
TNode - 无法“Object”验证传递的字符串属性。
- JSON.parse(prop-passed-by-parent)
- JSON.parse(JSON.stringify(prop-passed-by-parent)) - 一些答案 Whosebug 建议在解析

一些参考资料明确指出在解析之前进行字符串化。所以我也尝试了：

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

parent 组件的代码 - 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 component below fails to convert this.props.node to a JSON object - and keeps interpreting it as a string - as evident from console logs below and display on the browser (not shown here)

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' 是如何被解释为字符串的，而不是 object。请注意，index(key) 是整数，value 是字符串中的字符。

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

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

从 parent 传递给反应 child 组件的字符串道具 - 无法使用 JSON.parse() 转换为 Object

String prop passed to react child component from parent - unable to conver to Object with JSON.parse()

javascript

ajax

json

jsx

reactjs