通过 ReactJS 访问 JSON 中的数组

IT技术 javascript arrays json reactjs react-jsx
2021-05-08 09:13:15

我使用 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},它按预期显示,但是我如何才能访问movies数组?我以为我使用正确的语法来检索数组。如果不是这样,那什么才是真正的呢?如何从 JSON 数组中的对象获取数据并存储在 ReactJS 中的变量中?

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()返回要显示的每部电影的值。