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

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

Answer 1

试试这个：

{{1}}

Answer 2

我弄清楚发生了什么。我犯了一个愚蠢的错误，并将AlbumList导入其自身，并以递归方式自行安装。

import AlbumDetail from './AlbumList';

应该是

import AlbumDetail from './AlbumDetail';

React Native Component将Mount重复调用

2 个答案: