React-Native报错：Invariant Violation: 超过最大更新深度求助

嘿，我一眼就揪出问题啦！你碰到的这个Invariant Violation: Maximum update depth exceeded错误，根源明明白白就在你的Connect组件里。

先给你拆解下错误原因：你在TouchableOpacity的onPress属性里直接写了this.setState({ butPressed: true })——这可不行！这意味着每次组件渲染（render）的时候，这个setState都会被立刻执行，而setState又会触发组件重新渲染，这么一来就形成了无限循环，React为了保护应用不崩溃，就抛出了这个更新深度超限的错误。

你看你的Connect组件这段问题代码：

<TouchableOpacity onPress={this.setState({ butPressed: true })}>

onPress需要接收一个函数，只有当用户点击按钮时才会调用这个函数。但你现在是直接执行了setState，相当于把setState的返回值（undefined）传给了onPress，同时每次渲染都强制触发状态更新，可不就无限循环了嘛！

修复方案有两种，选哪种都可以： #

1. 用箭头函数包装setState（简单直接）
   把onPress的写法改成这样，只有点击时才会执行setState：

<TouchableOpacity onPress={() => this.setState({ butPressed: true })}>

2. 定义类方法（适合后续逻辑更复杂的场景）
   先定义一个处理点击的方法，再把它传给onPress，同时补上缺失的状态初始化和样式：

import React, { Component } from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

class Connect extends Component {
  // 初始化state，避免butPressed状态undefined
  state = {
    butPressed: false
  };

  handleConnectPress = () => {
    this.setState({ butPressed: true });
  };

  render() {
    return (
      <TouchableOpacity onPress={this.handleConnectPress}>
        <LinearGradient 
          colors={['#56EDFF', '#42F4A0']} 
          start={{ x: 0.0, y: 1.0 }} 
          end={{ x: 1.0, y: 1.0 }}
          style={styles.gradientBtn}
        >
          <Text style={styles.textStyle}>Se connecter</Text>
        </LinearGradient>
      </TouchableOpacity>
    );
  }
}

// 补上你之前缺失的textStyle及按钮基础样式
const styles = StyleSheet.create({
  gradientBtn: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignItems: 'center'
  },
  textStyle: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold'
  }
});

export default Connect;

另外还要提醒你两个小细节：

• 你的Connect组件之前没有初始化state，记得一定要先定义butPressed这个状态，不然会出现状态undefined的问题；
• 你之前用到的textStyle没有定义，上面的代码里补上了基础样式，你可以根据自己的UI需求调整。

内容的提问来源于stack exchange，提问作者Romain Constantin