2016-03-03 67 views
1

好了,我剛開始用的反應和原住民的一派題目我能夠做出這樣的:入門反應原住民,HTTP請求

index.ios.js:

var React = require('react-native'); 
var { AppRegistry } = React; 
var MarvelsApp = require('./components/start'); 

AppRegistry.registerComponent('MarvelsApp',() => MarvelsApp); 

start.js:

'use strict'; 

var React = require('react-native'); 

var { 
    Text, 
    View, 
    Image, 
    TextInput, 
    StatusBar, 
    ListView 
} = React; 

var b = 'https://api.themoviedb.org/3/movie/popular?api_key=XXXXXX'; 
console.log('api url',b); 

var stylesStart = React.StyleSheet.create({ 
     container: { 
      backgroundColor: 'pink', 
      flex: 1 
     }, 
     test: { 
      color: 'black', 
      fontSize: 22 
     } 
}); 

var Start = React.createClass({ 
    getInitialState() { 
     return { 
       movie: [], 
    }; 
    }, 
    componentDidMount: function() { 
    this.fetchData(); 
  }, 
    fetchData: function(){ 
     fetch(b) 
      .then((response) => response.json()) 
       .then((data) => { 
         console.log('Logging api response', data.results); 
         this.setState({ 
          movie: data 
         }); 
       }) 
       .done(); 
    }, 
    render: function() { 
     return (
      <View style={stylesStart.container}> 
       <StatusBar barStyle="light-content"/> 
       <Text style={stylesStart.test}>{this.state.movie.title}</Text> 
      </View> 

     ); 
    } 
}); 

module.exports = Start; 

enter image description here

基本上,我想實現的是使用themoviedb.org的api發出http請求。然後在視圖中顯示檢索到的數據。

到目前爲止,我可以通過http請求獲取數據,但我沒有多少運氣在視圖中顯示它。現在這可能是因爲我錯過了一步,或者因爲我做錯了。

請指出我哪裏或什麼,我做錯了

回答

0

您正在訪問從this.state錯了鍵,嘗試登錄this.state,看看它的結構。您可能需要調用this.state.movi​​e [0] .title才能看到標題。

0

你初始化狀態變量電影作爲數組 (return {movie: [],};

但使用它作爲一個對象(this.state.movie.title

最後,在更新狀態(this.setState({movie: data});

確保你使用的是你需要的類型。

如果您想渲染爲列表,狀態變量影片應該是一個數組,或者您只想渲染一個項目,它可能是一個對象