Rendern von JSON-Daten in mehreren Komponenten von react.js

Question

Ich möchte einige Werte aus einer JSON-Datei abrufen und sie in mehrere Komponenten rendern. Dieser Code scheint nicht zu funktionieren. Bitte schlagen Sie Änderungen vor. wahrscheinlich gibt es einige Probleme mit dem Umfang.

var App = React.createClass({ 

    getInitialState: function(){ 
     return { myData: [] } 

    }, 
    showResults: function(response){ 
     this.setState(
      {myData: response} 
     ) 
    }, 

    loadData: function(URL) { 
     $.ajax({ 
     type: 'GET', 
     dataType: 'jsonp', 
     url: URL, 
     success: function(response){ 
      this.showResults(response) 
     }.bind(this) 
     }) 
    }, 

    render: function(){ 
     this.loadData("fileLocation/sample.json"); 
     return(
     <div> 
     {myData.key1} 
     <Component1 value={myData.key2} /> 
     <Component2 value={myData.array[0].key3}/> 
     </div> 
    ) 
    } 
    }); 

    var Component1 = React.createClass({ 
    render: function() { 
     return(
     <div>{this.props.value}</div> 
    ) 
    } 
    }); 

    var Component2 = React.createClass({ 
    render: function() { 
     return(
     <div>{this.props.value}</div> 
    ) 
    } 
    }); 
    ReactDOM.render(<App/>, document.getElementById('content')); 

Das ist sample.json-Datei, die ich abholen möchte. Auch zeigt dies einen Syntaxfehler

{ 
    key1:"value1", 
    key2:"value2", 
    array: [ 
    {key3:"value3"}, 
    {key4:"value4"} 
    ] 
} 

Answer 1

Richtig showResults bei loadData[1] nennen:

var App = React.createClass({ 

    getInitialState: function(){ 
     return { myData: [] }; 
    }, 

    showResults: function(response){ 
     this.setState({ 
      myData: response 
     }); 
    }, 

    loadData: function(URL) { 
     var that = this; 
     $.ajax({ 
     type: 'GET', 
     dataType: 'json', 
     url: URL, 
     success: function(response){ 
      that.showResults(response); 
     } 
     }) 
    }, 

Verschieben loadDatarender-componentDidMount[2] und Zugriff richtig myData[3]:

componentDidMount: function() { 
     this.loadData("fileLocation/sample.json"); 
    }, 

    render: function(){ 
     return(
     <div> 
     {this.state.myData.key1} 
     <Component1 value={this.state.myData.key2} /> 
     <Component2 value={this.state.myData.array[0].key3}/> 
     </div> 
    ) 
    } 
}); 

Halten Component1 und Component2 als sie ohnehin schon sind:

var Component1 = React.createClass({ 
    render: function() { 
     return(
     <div>{this.props.value}</div> 
    ) 
    } 
}); 

var Component2 = React.createClass({ 
    render: function() { 
     return(
     <div>{this.props.value}</div> 
    ) 
    } 
}); 
ReactDOM.render(<App/>, document.getElementById('content'));