如何從的getJSON數據綁定到ReactJS狀態

我一直在試圖從JSON文件中獲取數據，並將其與ReactJS如何從的getJSON數據綁定到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 
}

來源

2015-09-28 necroface

你需要使用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'));

https://jsfiddle.net/63nL7yfj/

來源

2015-09-28 07:43:19 user3224271

感謝。這樣做，我想問一個小問題：當我寫 'console.log（this.state.movies）;' 控制檯顯示'電影'數組但是，當我寫 'console.log（this .state.movies [0]）;' 它顯示錯誤，我無法訪問'電影'數組中的對象。我該怎麼做？ – necroface

你不能console.log表明它不能像那樣工作。這是你的意思嗎？ https://jsfiddle.net/f1x9ur21/ – user3224271

我想獲得'電影'的數據。我可以通過'{data.runtime}'訪問'runtime'。但是當我嘗試通過'{data.movies [0] .title}'訪問'movies'中第一個對象的'title'時，沒有任何內容顯示 – necroface

如何從的getJSON數據綁定到ReactJS狀態

回答

相關問題