我使用 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 中的变量中？
最佳答案
我认为您正试图实现这样的目标，对吧: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() 返回要显示的每部电影的值。
关于javascript - 通过 ReactJS 访问 JSON 中的数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32818968/