通过 ReactJS 访问 JSON 中的数组
Posted
技术标签:
【中文标题】通过 ReactJS 访问 JSON 中的数组【英文标题】：Get access to array in JSON by ReactJS 【发布时间】：2015-12-25 10:59:05 【问题描述】：我使用 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() 返回要显示的每部电影的值。
【讨论】：
值得一提的是需要指定key
谢谢@zerkms，我会把它添加到示例中。
抱歉，地图中缺少return 声明。我习惯于编写 ES6 箭头语法，默认情况下返回... :)。检查我在帖子中提供的示例链接。
我不知道为什么它仍然可以在 codepen.io 上运行，但是当我将它复制并粘贴到我的编辑器并重新加载时它不起作用
我更新了示例。它使用了 chriscoyer 的 codepen 示例中的一些端点，不要在意。 XHR 成功回调将您的响应 JSON 设置为数据状态。它有效。以上是关于通过 ReactJS 访问 JSON 中的数组的主要内容，如果未能解决你的问题，请参考以下文章