Invariant Violation:Maximum update depth exceeded

懷着無比頭大的心情，今天寫了一個React Native的底部導航欄。我僅僅加了一個選項，報錯了，我就知道...就知道。它肯定會報錯，但是它來的是那麼突然。悲傷不已。

                                                               

就是這個錯查了一下，說是超出最大更新深度。當組件在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 (<HomePage/>);
      case "classify":
       return (<ClassifyPage/>);
      case "register":
       return (<Register/>);
    }
  };

  render() {
    return (
      <TabNavigator>
        <TabNavigator.Item
          selected = {this.state.selectedTab === 'home'}
          title='首頁'
          renderIcon={()=> <Image 
            style={{
              width:25,
              height:25
            }}
            source={require('./Images/home1.png')}/>}
          renderSelectedIcon = {()=> <Image
            style={{width:25,
                    height:25      
            }}
            source={require('./Images/home0.png')}/>}
          onPress={()=>this.setState({selectedTab:'home'})}>
          {this._renderContent('#FFFFFF','home')}

        </TabNavigator.Item>
        <TabNavigator.Item
          selected = {this.state.selectedTab === 'classify'}
          title='分類'
          renderIcon={()=> <Image 
            style={{
              width:25,
              height:25    
            }}
            source={require('./Images/classify1.png')}/>}
          renderSelectedIcon = {()=> <Image 
            style={{
              width:25,
              height:25
            }}
            source={require('./Images/classify0.png')}/>}
          onPress={()=>this.setState({selectedTab:'classify'})}>
          {this._renderContent('#FFFFFF','classify')}
        </TabNavigator.Item>
        <TabNavigator.Item
          selected ={this.state.selectedTab === 'register'}
          title='我的'
          renderIcon={()=> <Image 
            style={{
              width:25,
              height:25
            }}
            source={require('./Images/my1.png')}/>}
          renderSelectedIcon={()=> <Image 
            style={{
              width:25,
              height:25
            }}
            source={require('./Images/my0.png')}/>}
          onPress={this.setState({selectedTab:'register'})}>
          {this._renderContent('#FFFFFF','register')}
        </TabNavigator.Item>
      </TabNavigator>
    );
  }
}

我是，在原有的兩個選項中，新增了一個選項，出現的這個錯誤。那當然是，最大的可能就是我寫的有問題了啊。我首先，先將我寫的渣渣代碼註釋掉。哦呵呵，果然是我的渣渣代碼的問題。然後，我就對三個選項代碼進行深度比較。果然，讓我發現了不同尋常之處，就是渣渣代碼中最渣的代碼，渣渣代碼中的佼佼者。我將它稱之爲超級渣代碼。下面就是超級渣代碼

        <TabNavigator.Item
          selected ={this.state.selectedTab === 'register'}
          title='我的'
          renderIcon={()=> <Image 
            style={{
              width:25,
              height:25
            }}
            source={require('./Images/my1.png')}/>}
          renderSelectedIcon={()=> <Image 
            style={{
              width:25,
              height:25
            }}
            source={require('./Images/my0.png')}/>}
          onPress={this.setState({selectedTab:'register'})}>
          {this._renderContent('#FFFFFF','register')}
        </TabNavigator.Item>

不仔細看，沒看出問題。仔細一看，也沒看出問題。。。。。   然後，我拿着放大鏡看了一遍。終於，在我看到頭暈腦花的時候，發現了不同尋常之處。

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

就是這一行，出現問題了。看一下正常的寫法。

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

沒有看錯，就是少了一個 ()=> 。。。。。。加上這個就好使了。emmm  不說了。我要下班了。。。。