React native 开始使用React Native，发出http请求

好的，我刚从React Native开始，在谷歌上搜索我能做的主题：

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;

“严格使用”；
var React=require（'React-native'）；
变量{
文本，
看法
形象,，
文本输入，
状态栏，
列表视图
}=反应；
var b='1https://api.themoviedb.org/3/movie/popular?api_key=XXXXXX';
log（'api url'，b）；
var stylessstart=React.StyleSheet.create({
容器：{
背景颜色：“粉色”，
弹性：1
},
测试：{
颜色：'黑色'，
尺寸：22
}
});
var Start=React.createClass({
getInitialState（）{
返回{
电影：[]，
};
},
componentDidMount:function（）{
这是fetchData（）；
  },
fetchData:function（）{
取回（b）
.then（（response）=>response.json（））
。然后（（数据）=>{
log（'Logging api response'，data.results）；
这是我的国家({
电影：数据
});
})
.完成（）；
},
render:function（）{
返回(
{this.state.movie.title}
);
}
});
module.exports=开始；

基本上，我试图实现的是使用moviedb.org上的api发出http请求。然后在视图中显示检索到的数据

到目前为止，我能够通过http请求拉入数据，但我没有太多的运气在视图中显示它。这可能是因为我错过了一步，或者是因为我做错了

---

请向我指出我做错的地方或原因

您从this.state访问了错误的密钥，请尝试记录this.state并查看其结构。您可能需要调用此.state.movie[0].title以查看标题。

如果从此.state访问的键不正确，请尝试记录此.state并查看其结构。您可能需要调用此.state.movie[0].title以查看标题。

将状态变量movie初始化为数组 （

返回{movie:[]，}；

）

但您将其用作对象（

this.state.movie.title

）

最后，更新状态（

this.setState（{movie:data}）；

）

确保您使用的类型符合您的需要

---

如果要渲染为列表，状态变量电影应该是一个数组，或者只想渲染一个项目，它可以是一个对象

将状态变量电影初始化为数组 （

返回{movie:[]，}；

）

但您将其用作对象（

this.state.movie.title

）

最后，更新状态（

this.setState（{movie:data}）；

）

确保您使用的类型符合您的需要

如果要渲染为列表，状态变量movie应该是一个数组，或者您只想渲染一个项目，它可以是一个对象