React-Native=不变违规：超出最大更新深度

Question

我有这个错误，以前也没有过：这是错误的图像“不变量冲突：超过最大更新深度”。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。

此错误位于：Connect中（位于LoginForm.js:75）

render() {
const { inputStyle, containerStylePass, containerStyleIdent, barStyle, textInputStyle } = styles;

return (
   <View>
    <View>{/* all the password form*/}
      <View style={containerStylePass}>
      icon
        <Text style={inputStyle}>Mot de passe</Text>
      </View>
      <TextInput
        secureTextEntry
        autoCorrect={false}
        style={textInputStyle}
      />
      <View style={barStyle} />
    </View>

    <View>
      <Connect />
    </View>
  </View>

我不知道为什么是错误，有人能帮忙吗？

这是我的代码：

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

class Connect extends Component {

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

Answer 1

如果您正在使用Expo，请重新启动Expo（终止并再次打开）。我不知道，但它对我有效。

Answer 2

超过了最大更新深度。当组件重复调用组件WillUpdate或组件DidUpdate中的setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。

Answer 3

尝试:

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

代替

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

在没有箭头函数的情况下将{this.setState}分配给onPress会导致一次又一次的渲染，因为setState会将组件再次渲染，然后它会再次分配给onPress = {}. 使用箭头函数而不是分配一个函数，这样setState实际上不会发生，直到函数被激活。（仅当onPress被激活时）