Comment lier les données de getJSON à ReactJS état

J'ai essayé d'obtenir des données à partir du fichier JSON et le lier à ma page avec ReactJS

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo Fetch</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script type="text/jsx">
        var DataBlock = React.createClass({
            getInitialState:function(){
                return {};
            },
            loadData:function() {
                var a=this;
                $.getJSON(this.props.url, function (obj) {
                    a.setState({data: obj})
                });
            },
            render: function() {
                return (
                        <div className="dataBlock" data={this.state.data}>
                            <h1>Sample data block</h1>
                                {this.loadData()}
                                <h3>{data.runtime}</h3>
                        </div>
                );
            }
        });
        React.render(
                <DataBlock url="small_data.json"/>,
                document.getElementById('content')
        );
    </script>
</body>
</html>

Mais rien ne s'affiche lorsque j'essaie d'afficher la page. Quel est le problème avec mon code? Où est le bug? Pourquoi je ne peux pas lier les données de getJSON mon état de Réagir composant?

C'est mon small_data.json fichier:

{
  "movies": [
    {
      "abridged_cast": [
        {
          "characters": [
            "Dominic Toretto"
          ],
          "id": "162652472",
          "name": "Vin Diesel"
        },
        {
          "characters": [
            "Brian O'Conner"
          ],
          "id": "162654234",
          "name": "Paul Walker"
        }
      ],
      "runtime": 140,
      "synopsis": "Continuing the global exploits in the unstoppable franchise built on speed, Vin Diesel, Paul Walker and Dwayne Johnson lead the returning cast of Fast & Furious 7. James Wan directs this chapter of the hugely successful series that also welcomes back favorites Michelle Rodriguez, Jordana Brewster, Tyrese Gibson, Chris \"Ludacris\" Bridges, Elsa Pataky and Lucas Black. They are joined by international action stars new to the franchise including Jason Statham, Djimon Hounsou, Tony Jaa, Ronda Rousey and Kurt Russell.",
      "title": "Furious 7",
      "year": 2015
    }
  ],
  "runtime": 140
}

OriginalL'auteur necroface | 2015-09-28

  1. 1

    vous devez utiliser componentDidMount: function() {
    pour charger les données

    import React from 'react';
import ReactDOM from 'react-dom';

const data = {
  "movies": [
    {
      "abridged_cast": [
        {
          "characters": [
            "Dominic Toretto"
          ],
          "id": "162652472",
          "name": "Vin Diesel"
        },
        {
          "characters": [
            "Brian O'Conner"
          ],
          "id": "162654234",
          "name": "Paul Walker"
        }
      ],
      "runtime": 140,
      "synopsis": "Continuing the global exploits in the unstoppable franchise built on speed, Vin Diesel, Paul Walker and Dwayne Johnson lead the returning cast of Fast & Furious 7. James Wan directs this chapter of the hugely successful series that also welcomes back favorites Michelle Rodriguez, Jordana Brewster, Tyrese Gibson, Chris \"Ludacris\" Bridges, Elsa Pataky and Lucas Black. They are joined by international action stars new to the franchise including Jason Statham, Djimon Hounsou, Tony Jaa, Ronda Rousey and Kurt Russell.",
      "title": "Furious 7",
      "year": 2015
    }
  ],
  "runtime": 140
}

const DataBlock = React.createClass({
    getInitialState: () => {
      return {
        data: null
      };
    },

    componentDidMount: () => {
                this.setState({
                    data: this.props.url
                });   
   },             
    render() {
        return <div>
        <h3>runtime: {data.runtime}</h3>
        <h4>the data:</h4> 
        {this.state.data}
        </div>;
    }
});


ReactDOM.render(<DataBlock url={data}/>, document.getElementById('.container'));

    https://jsfiddle.net/63nL7yfj/

    Merci. C'est fait, je veux vous poser une petite question: Quand j'écris console.log(this.state.movies); La console affiche tableau de movies Mais quand j'écris console.log(this.state.movies[0]); Il montre l'erreur, je ne peut pas accéder aux objets dans movies tableau. Comment puis-je le faire?
    vous ne pouvez pas la console.journal d'état, il ne fonctionne pas comme ça. est-ce cela que vous voulez dire tho ?? jsfiddle.net/f1x9ur21
    Je veux obtenir les données de movies. Je peux obtenir l'accès à runtime par {data.runtime}. Mais quand j'essaie d'accéder à title du premier objet dans movies par {data.movies[0].title}, rien n'est indiqué

    OriginalL'auteur user3224271