我使用 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 中的变量中?