循环遍历 JSON 对象的条目并通过反应状态，获得“未定义状态”

Question

如果我偏离目标，请原谅，但我正在尝试将组件的状态设置为 json 对象，以便我可以使用组件渲染它。

这是我的组件中当前的内容：

render: function() {
    this.serverRequest = $.get(this.props.source, function (data) {
        this.state.content = $.parseJSON(data);

    }.bind(this));

    return (
        <div>

            {Object.keys(this.state.content).map(function (key) {
                return <div>Key: {key}, Value: {this.state.content[key]}</div>;
            })}


        </div>
    );

使用此代码，我目前得到：

未捕获的类型错误：无法读取未定义的属性“状态”

任何人都知道为什么这不起作用？

Answer 1

问题是，$.get() 中的 this 不在 React 的范围内。在渲染中调用setState() 会抛出错误。以下应该会有所帮助...

var App = React.createClass({
  getInitialState: function() {
    return {
      content: {},
    }
  },

  componentDidMount: function() {
    this.serverRequest()
  },

  serverRequest: function() {
    var _this = this
    $.get(this.props.source, function(data) {
      _this.state.content = $.parseJSON(data);

    })
  },

  render: function() {
    return ( < div >

      {
        Object.keys(this.state.content).map(function(key) {
          return <div > Key: {
            key
          }, Value: {
            this.state.content[key]
          } < /div>;
        })
      }


      < /div >
    );
  }
})