通過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> 
    ); 

有了這個代碼，我目前得到：

Uncaught TypeError: Cannot read property 'state' of undefined

任何人有任何見解，爲什麼這是不工作？

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