Javascript 使用ReactJS从JSON获取数据时出现问题

我有一个类似这样的JSON文件，名为

data.JSON

{
  "link_template": "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit={num-results}&country={country-code}",
  "links": {
    "alternate": "http://www.rottentomatoes.com/movie/box-office/",
    "self": "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit=20&country=us"
  },
  "movies": [
    {
      "abridged_cast": [
        {
          "characters": [
            "Dominic Toretto"
          ],
          "id": "162652472",
          "name": "Vin Diesel"
        },
        {
          "characters": [
            "Brian O'Conner"
          ],
          "id": "162654234",
          "name": "Paul Walker"
        },
        {
          "characters": [
            "Louie Tran"
          ],
          "id": "162684066",
          "name": "Tony Jaa"
        },
        {
          "characters": [
            "Deckard Shaw"
          ],
          "id": "162653720",
          "name": "Jason Statham"
        },
        {
          "characters": [
            "Luke Hobbs"
          ],
          "id": "770893686",
          "name": "Dwayne \"The Rock\" Johnson"
        }
      ],
      "alternate_ids": {
        "imdb": "2820852"
      },
      "critics_consensus": "",
      "id": "771354922",
      "links": {
        "alternate": "http://www.rottentomatoes.com/m/furious_7/",
        "cast": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/cast.json",
        "reviews": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/reviews.json",
        "self": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922.json",
        "similar": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/similar.json"
      },
      "mpaa_rating": "PG-13",
      "posters": {
        "detailed": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",
        "original": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",
        "profile": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",
        "thumbnail": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg"
      },
      "ratings": {
        "audience_rating": "Upright",
        "audience_score": 88,
        "critics_rating": "Certified Fresh",
        "critics_score": 82
      },
      "release_dates": {
        "theater": "2015-04-03"
      },
      "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
    },
    {
      "abridged_cast": [
        {
          "characters": [
            "Oh"
          ],
          "id": "770702500",
          "name": "Jim Parsons"
        },
        {
          "characters": [
            "Tip"
          ],
          "id": "351524959",
          "name": "Rihanna"
        },
        {
          "characters": [
            "Captain Smek"
          ],
          "id": "162654836",
          "name": "Steve Martin"
        },
        {
          "id": "162652167",
          "name": "Jennifer Lopez"
        }
      ],
      "alternate_ids": {
        "imdb": "2224026"
      },
      "critics_consensus": "",
      "id": "771315639",
      "links": {
        "alternate": "http://www.rottentomatoes.com/m/home_2015/",
        "cast": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639/cast.json",
        "reviews": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639/reviews.json",
        "self": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639.json",
        "similar": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639/similar.json"
      },
      "mpaa_rating": "PG",
      "posters": {
        "detailed": "http://resizing.flixster.com/LO7V_j1xUTlsbwzIyCINBxBm5qE=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg",
        "original": "http://resizing.flixster.com/LO7V_j1xUTlsbwzIyCINBxBm5qE=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg",
        "profile": "http://resizing.flixster.com/LO7V_j1xUTlsbwzIyCINBxBm5qE=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg",
        "thumbnail": "http://resizing.flixster.com/LO7V_j1xUTlsbwzIyCINBxBm5qE=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg"
      },
      "ratings": {
        "audience_rating": "Upright",
        "audience_score": 69,
        "critics_rating": "Rotten",
        "critics_score": 47
      },
      "release_dates": {
        "theater": "2015-03-26"
      },
      "runtime": 93,
      "synopsis": "When Oh, a loveable misfit from another planet, lands on Earth and finds himself on the run from his own people, he forms an unlikely friendship with an adventurous girl named Tip who is on a quest of her own. Through a series of comic adventures with Tip, Oh comes to understand that being different and making mistakes is all part of being human. And while he changes her planet and she changes his world, they discover the true meaning of the word HOME. (c) Fox",
      "title": "Home",
      "year": 2015
    }
  ]
}

这是我的ReactJS代码，旨在从该JSON文件获取数据并绑定到我的React组件中

var CastMember=React.createClass({
    render:function(){
        <div className="castmember">
        </div>
    }
});
var Cast=React.createClass({
    render:function(){
        var cast_members=this.props.cast.map(function (member){
            return (
                <CastMember member={member}/>
            );
        });
        return (
            <div className="cast">
                {cast_members}
            </div>
        );
    }
});
var Movie=React.createClass({
    render:function(){
        return (
            <div className="movieBox">
                <Cast cast={this.props.movie.abridged_cast}/>
            </div>
        );
    }
});
var MovieList=React.createClass({
    render:function(){
        var movieNodes=this.props.movies.map(function (movie){
            return (
                <Movie movie={movie}/>
            );
        });
        return (
            <div className="movieList">
                {movieNodes}
            </div>
        );
    }
});
var DataBlock = React.createClass({
        getInitialState:function() {
            return {data:{
                movies:[
                    {abridged_cast:[]}
                ]
            }}
        },
        componentDidMount:function() {
            var a=this;
            $.ajax({
                url:this.props.url,
                dataType:'json',
                cache:false,
                success:function(data){
                    this.setState({data:data})
                }.bind(this)
            });
        },
        render: function() {
            return (
                <div className="dataBlock">
                    <h1>Movie List</h1>
                    <MovieList movies={this.state.data.movies}/>
                </div>
);
}
});
React.render(
    <DataBlock url="data.json"/>,
    document.getElementById('content')
);

var CastMember=React.createClass({
render:function（）{
}
});
var Cast=React.createClass({
render:function（）{
var cast_members=this.props.cast.map（函数（成员）{
返回(
);
});
返回(
{演员组成员}
);
}
});
var Movie=React.createClass({
render:function（）{
返回(
);
}
});
var MovieList=React.createClass({
render:function（）{
var movieNodes=this.props.movies.map（函数（电影）{
返回(
);
});
返回(
{movieNodes}
);
}
});
var-DataBlock=React.createClass({
getInitialState:函数（）{
返回{数据：{
电影：[
{演员简介：[]}
]
}}
},
componentDidMount:function（）{
var a=此；
$.ajax({
url:this.props.url，
数据类型：'json'，
cache:false，
成功：功能（数据）{
this.setState（{data:data}）
}.绑定（此）
});
},
render:function（）{
返回(
电影列表
);
}
});
反应(
,
document.getElementById（'content'）
);

我一直在做这个演示在自下而上的顺序。我能够从JSON文件中获取电影列表并进行渲染，但现在我只能在每部电影中获取剪辑

---

在

Cast

组件的

render

函数中，如果我将其替换为rendering

{this.props.Cast}

，所有内容都会显示出来。但是我无法将它们映射到

CastMember

组件的

member

属性：上面的代码没有显示任何内容。我的代码怎么了？

您正在渲染空div。不会产生任何可见的输出。。。你希望看到什么？如果要显示名称，则必须呈现它：

{this.props.member.name}

。我找到了解决方案！我忘了在

render

函数中返回

。谢谢，我找到了解决办法！我忘了在
render
函数中返回
。谢谢
var CastMember=React.createClass({
    render:function(){
        <div className="castmember">
        </div>
    }
});

var CastMember=React.createClass({
        render:function(){
            return (
               <div className="castmember">
                 {this.props.member}
               </div>
            );
        }
    });