javascript - React Native Component Will Mount 重复调用

Question

我正在学习 React Native 教程，但遇到了一个问题。我创建了一个基于类的组件，它通过将一个数组映射到 5 个文本组件来在屏幕上显示一个小列表。这有效的发现。当我用基于函数的组件替换文本组件时，我遇到了问题。我在 componentWillMount 中获取数组的数据，当我切换到基于函数的组件时，我看到 componentWillMount 被重复调用并且屏幕上没有显示任何数据。渲染方法也被重复调用。我正在使用 native react 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);

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

Answer 1

试试这个:

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