Javascript React本机组件将被反复调用

我正在学习React本机教程，遇到了一个问题。我创建了一个基于类的组件，通过将一个数组映射到5个文本组件，在屏幕上显示一个小列表。这个发现很有效。当我用基于函数的组件替换文本组件时，我遇到了问题。我在componentWillMount中获取数组的数据，当我切换到基于函数的组件时，我看到componentWillMount被反复调用，屏幕上没有显示任何数据。渲染方法也会被重复调用。我使用的是react native 0.50。

AlbumList.js:
//导入库以生成registerComponent
从“React”导入React，{Component}；
从“react native”导入{View，Text}；
从“axios”导入axios；
从“/AlbumList”导入AlbumDetail；
类列表扩展组件{
建造师（道具）{
超级（道具）；
this.state={albums:[]}；
}
componentDidMount（）{
log（'componentdidmountinAlbumList'）；
axios.get（）https://rallycoding.herokuapp.com/api/music_albums')
.那么(
response=>this.setState（{albums:response.data}）
);
}
renderAlbums（）{
返回此.state.albums.map(
//相册=>
相册=>{album.title}
);
}
render（）{
console.log（this.state.albums）；
返回(
{this.renderAlbums（）}
);
}
}
导出默认列表；

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;

//导入库以生成registerComponent
从“React”导入React；
从“react native”导入{Text，View}；
常量相册详细信息=（道具）=>{
返回(
{props.album.title}
);
};
导出默认的相册详细信息；

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

从“React”导入React；
从“react native”导入{AppRegistry，View}；
从“./src/Components/Header”导入标题；
从“/src/Components/AlbumList”导入AlbumList；
常量应用=（）=>(
);
AppRegistry.registerComponent（'albums'，（）=>App）；

映射到组件时，一切都按预期工作。当映射到组件时，组件willmount和render在一个看似无限的循环中被调用。我尝试了componentDidMount，结果也一样。

试试这个：

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

renderAlbums（）{
const list=this.state.albums.map（album=>{
返回；
});
退货清单；
}

我知道发生了什么。我犯了一个愚蠢的错误，将AlbumList导入到它自己，它正在递归地装载自己

import AlbumDetail from './AlbumList';

应该是

import AlbumDetail from './AlbumDetail';

---

它与函数组件一起工作也很好。不幸的是，我仍然有与上面相同的问题。我应该在上面提到我在0.50上

import AlbumDetail from './AlbumDetail';