使用 ReactJS 从 JSON 获取数据时遇到问题

Question

我有一个这样的 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')
);

我一直在按从下到上的顺序做这个演示。我能够从 JSON 文件中获取 movies 的列表并渲染它，但现在卡在每个 movie

中获取 abridged_cast

在Cast组件的render函数中，如果我将其替换为渲染{this.props.cast}，一切都会显示出来。但是我无法将它们映射到 CastMember 组件的 member 属性：我上面的代码没有显示任何内容。我的代码有什么问题？

Answer 1

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

CastMember 组件应该处理它的 prop，因为你将数据 member 传递给 CastMember-> <CastMember member={member}/>.

这会有所帮助：

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

使用 ReactJS 从 JSON 获取数据时遇到问题

Trouble getting data from JSON with ReactJS

javascript

parsing

json

components

reactjs