在React Native中基于HTTP GET响应显示列表

Question

我正在尝试基于HTTP GET响应在我的视图中显示一个列表。

我有

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

class AlbumList extends Component {

    state = { albums: [] }; 

    componentWillMount() {
        axios.get('https://rallycoding.herokuapp.com/api/music_albums')
            .then(response => this.setState({albums:response.data}));
    }

    renderAlbums() {
        this.state.albums.map(album => <Text>{ album.title }</Text> );
    }

    render() { 
        // console.log(this.state);
        console.log(this.state.albums);

        return (
            <View>
                { this.renderAlbums() }
            </View>
        );
    }
}

export default AlbumList; 

我一直很空虚

但是我似乎看不到控制台中的响应。

更新

修复此行后

  

return this.state.albums.map(album => <Text>{ album.title }</Text> );

我还是得到这个

  

TypeError：this.state.albums.map不是函数

     

---

我希望看到这样的东西

Answer 1

在renderAlbums中，您缺少return

renderAlbums () {
  return this.state...
}

对于价值而言，componentWillMount不应用于获取数据（并调用this.setState）-您应该将其保留在componentDidMount