阵营原住民 - 渲染列表

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> 
     ); 
    }); 
}