如何将数据从getJSON绑定到ReactJS状态

我一直在尝试从 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"
          ],"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'));

https://jsfiddle.net/63nL7yfj/

相关文章

文章浏览阅读2.4k次。最近要优化cesium里的热力图效果,浏览...
文章浏览阅读1.2w次,点赞3次,收藏19次。在 Python中读取 j...
文章浏览阅读1.4k次。首字母缩略词 API 代表应用程序编程接口...
文章浏览阅读802次,点赞10次,收藏10次。解决一个JSON反序列...
文章浏览阅读882次。Unity Json和Xml的序列化和反序列化_uni...