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  不说了。我要下班了。。。。