通过 ReactJS 访问 JSON 中的数组

Question

我使用 ReactJS 从 JSON 文件中获取数据

<!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 {data:[]};
            },
            componentDidMount:function() {
                var a=this;
                $.getJSON(this.props.url, function(data) {
                    a.setState({data:data})
                });
            },
            render: function() {
                console.log(this.state);
                return (
                        <div>
                            <h1>Sample data block</h1>
                                <h3>{this.state.data.movies[0].title}</h3>
                        </div>
                );
            }
        });
        React.render(
                <DataBlock url="small_data.json"/>,
                document.getElementById('content')
        );
    </script>
</body>
</html>

这是 JSON 文件 small_data.json

{
  "movies": [
    {
      "abridged_cast": [
        {
          "characters": [
            "Dominic Toretto"
          ],
          "id": "162652472",
          "name": "Vin Diesel"
        },
        {
          "characters": [
            "Brian O'Conner"
          ],
          "id": "162654234",
          "name": "Paul Walker"
        }
      ],
      "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
}

title 和其他任何内容均未显示。但是当我尝试在 JSON 文件中显示一个非数组对象时，比如 runtime，我只是使用 {this.state.data.runtime}，它按预期显示，但是我如何才能访问 [=17] =]数组？我以为我使用正确的语法来检索数组。如果不是这样，那真正的是什么？如何从 JSON 中的数组中的对象获取数据并存储在 ReactJS 中的变量中？

Answer 1

我认为你正在努力实现这样的目标，对吧：http://codepen.io/zvona/pen/BoQVoj?editors=001

return (
  <div>
    <h1>Sample data block</h1>
    {this.state.data.movies.map(function(movie, i) {
      return <h3 key={'movie-'+ i}>{movie.title}</h3>
    })}
  </div>
);

它循环遍历 movies 数组和 .map() returns 要显示的每部电影的值。

通过 ReactJS 访问 JSON 中的数组

Get access to array in JSON by ReactJS

javascript

arrays

json

reactjs

react-jsx