Reactネイティブコンポーネントは繰り返し呼び出されます。

Question

私はReact Nativeチュートリアルの途中で問題を抱えています。私は5つのテキストコンポーネントに配列をマッピングすることによって、画面上に小さなリストを表示するクラスベースのコンポーネントを作成しました。これは見つかった。テキストコンポーネントを関数ベースのコンポーネントに置き換えると、問題が発生しています。私はcomponentWillMountで配列のデータを取得しています。関数ベースのコンポーネントに切り替えると、componentWillMountが繰り返し呼び出され、データが画面に表示されません。レンダリングメソッドも繰り返し呼び出されています。私は反応ネイティブ0.50を使用しています。

AlbumList.js: 
//Import libraries for making registerComponent 
import React, { Component } from 'react'; 
import { View, Text } from 'react-native'; 
import axios from 'axios'; 
import AlbumDetail from './AlbumList'; 

class AlbumList extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { albums: [] }; 
    } 

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

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

    render() { 
    console.log(this.state.albums); 
    return (
     <View> 
     {this.renderAlbums()} 
     </View> 
    ); 
    } 
} 
export default AlbumList; 

AlbumDetail.js：

//Import libraries for making registerComponent 
import React from 'react'; 
import { Text, View } from 'react-native'; 

const AlbumDetail = (props) => { 
    return (
    <View> 
     <Text>{props.album.title}</Text> 
    </View> 
); 
}; 

export default AlbumDetail; 

index.js：

import React from 'react'; 
import { AppRegistry, View } from 'react-native'; 
import Header from './src/Components/Header'; 
import AlbumList from './src/Components/AlbumList'; 

const App =() => (
    <View> 
    <Header headerText={'Albums'} /> 
    <AlbumList /> 
    </View> 
); 

AppRegistry.registerComponent('albums',() => App); 

予想通りのコンポーネントすべてにマッピングが動作します。コンポーネントコンポーネントWillMountとレンダリングにマッピングすると、無限ループのように見えるようになります。私は同じ結果でcomponentDidMountを試しました。

Answer 1

。私は愚かな間違いを犯してアルバムリストをインポートし、再帰的にマウントしていました。

import AlbumDetail from './AlbumList'; 

それは、同様の機能成分と正常に動作します

import AlbumDetail from './AlbumDetail'; 

Answer 2

これを試してみてください：私は何が起こったのかを考え出し

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