是什么导致 React Native componentDidMount 被无限期地调用 none 停止？

Question

这是App.js

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import MovieList from './MovieList';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MovieList />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

这是MoveList.js

import React, { Component } from 'react';
import { Platform, StyleSheet, FlatList, ActivityIndicator, Text, View } from 'react-native';

export default class MovieList extends Component {

  constructor(props){
    super(props);
    this.state ={ isLoading: true}
  }

  componentDidMount() {
    console.log("componentDidMount")
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        // console.log("responseJson: " + JSON.stringify(responseJson))
        this.setState({
          isLoading: false,
          dataSource: responseJson.movies,
        }, function(){

        });
      })
      .catch((error) =>{
        console.error(error);
      });
  }

  render(){

    if(this.state.isLoading){
      return(
        <View style={{flex: 1, padding: 20}}>
          <ActivityIndicator/>
        </View>
      )
    }

    return(
      <View style={styles.container}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) => <Text>{item.title}, {item.releaseYear}</Text>}
          keyExtractor={({id}, index) => id}
        />
        <MovieList name='Valeera' />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

下载电影的代码来自官方入门教程networking，唯一不同的是我将代码放在了一个名为MovieList的新js文件中，并将其作为一个组件包含在App.js

通过上面的代码，componentDidMount 被调用none 停止，并无限期地打印电影列表，最终应用程序会崩溃。

componentDidMount 不是应该只调用一次吗？是什么导致它被无限期地调用？上面的代码我做错了什么？

Answer 1

您正在将组件 MovieList 嵌入到组件本身的渲染方法中。这正在创建无限循环。可能你只需要在那里删除它，因为你的 FlatList 看起来很完整。

是什么导致 React Native componentDidMount 被无限期地调用 none 停止？

What's causing React Native componentDidMount being called none stop, indefinitely?

react-native

react-component