React native 什么';是什么导致React Native componentDidMount被无限期地称为none stop?

React native 什么';是什么导致React Native componentDidMount被无限期地称为none stop?,react-native,react-component,React Native,React Component,这是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={sty

这是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',
  }
});
import React,{Component}来自'React';
从“react native”导入{平台、样式表、文本、视图};
从“/MovieList”导入MovieList;
导出默认类应用程序扩展组件{
render(){
返回(
);
}
}
const styles=StyleSheet.create({
容器:{
弹性:1,
为内容辩护:“中心”,
对齐项目:“居中”,
背景颜色:“#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',
  }
});
import React,{Component}来自'React';
从“react native”导入{Platform,StyleSheet,FlatList,ActivityIndicator,Text,View};
导出默认类MovieList扩展组件{
建造师(道具){
超级(道具);
this.state={isLoading:true}
}
componentDidMount(){
console.log(“componentDidMount”)
返回获取('https://facebook.github.io/react-native/movies.json')
.then((response)=>response.json())
.然后((responseJson)=>{
//log(“responseJson:+JSON.stringify(responseJson))
这是我的国家({
孤岛加载:false,
数据来源:responseJson.movies,
},函数(){
});
})
.catch((错误)=>{
控制台错误(error);
});
}
render(){
if(此.state.isLoading){
返回(
,唯一的区别是我将代码放在一个名为MovieList的新js文件中,并将其作为组件包含在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',
  }
});
使用上述代码,componentDidMount将被称为none stop,并无限期地打印电影列表,最终应用程序将崩溃


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

您的组件
MovieList
嵌入到组件本身的渲染方法中。这会创建一个无休止的循环。您可能只需要将其作为Fl移除即可atList似乎已完成。

您正在将组件
MovieList
嵌入到组件本身的渲染方法中。这将创建一个无休止的循环。可能您只需在平面列表似乎已完成时将其删除即可。

再次尝试注释组件didMount中的设置状态,可能是问题所在再次评论componentDidMount中的setState,可能就是这个问题