React Native-呈現列表

Question

我有以下代碼片段：

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

class AlbumList extends Component {
    state = { albums: [{}, {}, {}] };

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

    renderAlbums() {


        this.state.albums.map(album => {


            return (


                <Text key={album.title}>{album.title}</Text>
            );
        });
    }

    render() {
        const movies = this.state.albums.map(album => {


            return (

                <Text key={album.title}>{album.title}</Text>

            );
        });

        return (
            <View>
                {movies}
                {this.renderAlbums()}

            </View>
        );
    }
}

export default AlbumList;

影片名單應印有兩次，一次是因為的movies ，因為變量和其他renderAlbums()調用。 但是，由於movies可變，它只能打印一次。 renderAlbums()不起作用。 有任何想法嗎 ？

Answer 1

您還需要在renderAlbums return 。

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