通过ReactJS访问JSON中的数组

Question

通过ReactJS访问JSON中的数组

nec*_*ace 2 javascript arrays json reactjs react-jsx

我使用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>

Run Code Online (Sandbox Code Playgroud)

这是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
}

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

zvo*_*ona 6

我认为你正在努力实现这样的目标,对: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>
);

Run Code Online (Sandbox Code Playgroud)

它循环遍历movies数组并.map()返回要显示的每个影片的值.

归档时间：	10 年，10 月前
查看次数：	10799 次
最近记录：	10 年，6 月前