Question

好的，所以我刚开始使用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;

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

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

请指出我在哪里或我做错了什么

Answer 1

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

Answer 2

将状态变量影片初始化为数组（return {movie: [],};），

但您将其用作对象（this.state.movie.title），

最后，您更新状态（this.setState({movie: data});）

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

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

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

2 个答案: