Native Komponente replizieren Wird wiederholt aufgerufen

Question

Ich arbeite mich durch ein React Native Tutorial und habe ein Problem festgestellt. Ich habe eine klassenbasierte Komponente erstellt, die eine kleine Liste auf dem Bildschirm anzeigt, indem ein Array auf 5 Textkomponenten abgebildet wird. Das hat funktioniert. Wenn ich die Textkomponente durch eine funktionsbasierte Komponente ersetze, stoße ich auf Probleme. Ich hole die Daten für das Array in ComponentWillMount, wenn ich zur funktionsbasierten Komponente wechsle Ich sehe, dass componentWillMount wiederholt aufgerufen wird und keine Daten auf dem Bildschirm angezeigt werden. Die Rendermethode wird auch wiederholt aufgerufen. Ich benutze reactive native 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); 

Bei der Zuordnung zu der Komponente alles wie erwartet funktioniert. Beim Mapping werden die KomponentenWillMount und Render in einer scheinbar unendlichen Schleife aufgerufen. Ich habe componentDidMount mit den gleichen Ergebnissen versucht.

Answer 1

ich herausgefunden, was passiert ist. Ich machte einen dummen Fehler und importierte AlbumList in sich selbst und es rekrutierte sich selbstständig.

import AlbumDetail from './AlbumList'; 

haben sein sollten

import AlbumDetail from './AlbumDetail'; 

Answer 2

Versuchen Sie folgendes:

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