JSONファイルからデータを取得してReactJSでページにバインドしようとしています
<!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 {};
},
loadData:function() {
var a=this;
$.getJSON(this.props.url, function (obj) {
a.setState({data: obj})
});
},
render: function() {
return (
<div className="dataBlock" data={this.state.data}>
<h1>Sample data block</h1>
{this.loadData()}
<h3>{data.runtime}</h3>
</div>
);
}
});
React.render(
<DataBlock url="small_data.json"/>,
document.getElementById('content')
);
</script>
</body>
</html>
しかし、ページを表示しようとすると何も表示されません。私のコードの何が問題になっていますか?バグはどこにありますか?からgetJSON
Reactコンポーネントの状態にデータをバインドできないのはなぜですか?
これは私のsmall_data.json
ファイルです:
{
"movies": [
{
"abridged_cast": [
{
"characters": [
"Dominic Toretto"
],
"id": "162652472",
"name": "Vin Diesel"
},
{
"characters": [
"Brian O'Conner"
],
"id": "162654234",
"name": "Paul Walker"
}
],
"runtime": 140,
"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
}
componentDidMount: function() {
データをロードするために使用する必要があります
import React from 'react';
import ReactDOM from 'react-dom';
const data = {
"movies": [
{
"abridged_cast": [
{
"characters": [
"Dominic Toretto"
],
"id": "162652472",
"name": "Vin Diesel"
},
{
"characters": [
"Brian O'Conner"
],
"id": "162654234",
"name": "Paul Walker"
}
],
"runtime": 140,
"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
}
const DataBlock = React.createClass({
getInitialState: () => {
return {
data: null
};
},
componentDidMount: () => {
this.setState({
data: this.props.url
});
},
render() {
return <div>
<h3>runtime: {data.runtime}</h3>
<h4>the data:</h4>
{this.state.data}
</div>;
}
});
ReactDOM.render(<DataBlock url={data}/>, document.getElementById('.container'));
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加