Invariant Violation:Maximum update depth exceeded

怀着无比头大的心情,今天写了一个React Native的底部导航栏。我仅仅加了一个选项,报错了,我就知道...就知道。它肯定会报错,但是它来的是那么突然。悲伤不已。

                                                               Invariant Violation:Maximum update depth exceeded_第1张图片

就是这个错查了一下,说是超出最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时,可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。

懵逼,我也没用到这两个生命周期啊,我就调用了三次的setState。先上错误代码

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Image} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import HomePage from './Views/Home';
import ClassifyPage from './Views/Classify';
import Register from './Views/Register';

export default class App extends Component  {
  state = {
    selectedTab:'home'
  };

  _renderContent = (color,index) => {
    switch(index){
      case "home":
       return ();
      case "classify":
       return ();
      case "register":
       return ();
    }
  };

  render() {
    return (
      
         }
          renderSelectedIcon = {()=> }
          onPress={()=>this.setState({selectedTab:'home'})}>
          {this._renderContent('#FFFFFF','home')}

        
         }
          renderSelectedIcon = {()=> }
          onPress={()=>this.setState({selectedTab:'classify'})}>
          {this._renderContent('#FFFFFF','classify')}
        
         }
          renderSelectedIcon={()=> }
          onPress={this.setState({selectedTab:'register'})}>
          {this._renderContent('#FFFFFF','register')}
        
      
    );
  }
}

我是,在原有的两个选项中,新增了一个选项,出现的这个错误。那当然是,最大的可能就是我写的有问题了啊。我首先,先将我写的渣渣代码注释掉。哦呵呵,果然是我的渣渣代码的问题。Invariant Violation:Maximum update depth exceeded_第2张图片然后,我就对三个选项代码进行深度比较。果然,让我发现了不同寻常之处,就是渣渣代码中最渣的代码,渣渣代码中的佼佼者。我将它称之为超级渣代码。下面就是超级渣代码

         }
          renderSelectedIcon={()=> }
          onPress={this.setState({selectedTab:'register'})}>
          {this._renderContent('#FFFFFF','register')}
        

不仔细看,没看出问题。仔细一看,也没看出问题。。。。。   然后,我拿着放大镜看了一遍。终于,在我看到头晕脑花的时候,发现了不同寻常之处。

 onPress={this.setState({selectedTab:'register'})}

就是这一行,出现问题了。看一下正常的写法。

onPress={()=>this.setState({selectedTab:'register'})}

没有看错,就是少了一个 ()=> 。。。。。。加上这个就好使了。emmm  不说了。我要下班了。。。。Invariant Violation:Maximum update depth exceeded_第3张图片

你可能感兴趣的:(React,Native)