はネイティブリアクト - リスト

Question

をレンダリングI次のコードスニペットがあります

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変数のために1回だけ印刷されます。 renderAlbums()は機能しません。何か案は ？

Answer 1

returnをrenderAlbumsにする必要があります。

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