2016-03-03 86 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});

确保你使用的是你需要的类型。

如果您想渲染为列表,状态变量影片应该是一个数组,或者您只想渲染一个项目,它可能是一个对象