javascript 通过 ReactJS 访问 JSON 中的数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32818968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get access to array in JSON by ReactJS
提问by necroface
I use ReactJS to get data from a JSON file
我使用 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>
And this is JSON file small_data.json
这是 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
}
Neither titlenor anything else is displayed. But when I try to display a non-array object in JSON file, like runtime, I just use {this.state.data.runtime}, it shows as expected, but how can I get access to moviesarray? I thought I use proper syntax to retrive the array. If it's not like this, what is the true one? How can I get data from objects in array in JSON and store in variables in ReactJS?
既不title显示也不显示任何其他内容。但是，当我尝试在 JSON 文件中显示非数组对象时，例如runtime，我只是使用{this.state.data.runtime}，它按预期显示，但是我如何才能访问movies数组？我以为我使用正确的语法来检索数组。如果不是这样，那什么才是真正的呢？如何从 JSON 数组中的对象获取数据并存储在 ReactJS 中的变量中？
回答by Samuli Hakoniemi
I think you're trying to achieve something like this, right: http://codepen.io/zvona/pen/BoQVoj?editors=001
我认为您正在尝试实现这样的目标，对：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>
);
It loops through the moviesarray and .map()returns the value for each movie to be displayed.
它遍历movies数组并.map()返回要显示的每部电影的值。
