React-Native = Invariant Violation：超过最大更新深度

Posted 2023-05-07

【中文标题】React-Native = Invariant Violation：超过最大更新深度

【英文标题】：React-Native = Invariant Violation: Maximum update depth exceeded

【发布时间】：2018-10-30 21:55:19

【问题描述】：

我有这个错误，我以前没有它： here is the image of the error 不变违规：超过最大更新深度。当组件在 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>
    );
  

【问题讨论】：

请在问题中包含错误的文本内容。

你能展示你的 Connect 组件吗

我添加了连接组件@Deva

我包含了我的错误@Dragonthoughts 的文本内容

我认为您可以在连接组件中删除 onPress=this.setState( butPressed: true ) 并运行它

【参考方案1】：

尝试：

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

而不是

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

在没有箭头函数的情况下将 this.setState 分配给 onPress 会导致一遍又一遍地渲染，因为 setState 会封装组件以再次渲染，然后再次分配 onPress = 。 使用箭头函数而不是导致分配函数，因此 setState 实际上在函数被激活之前不会发生。 （仅当 onPress 被激活时）

【讨论】：

谢谢。我有一条红鲱鱼，它在抱怨反应导航器。然而，它只在一页上出现了这个错误。在所述页面上，我有一个流氓 this.setState(foo:bar)。再次感谢。

【参考方案2】：

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

【讨论】：

或者当您从 render() 调用没有任何用户交互的函数（每次渲染时调用）并且这些函数具有 setState() 时。这会创建一个无限循环。

投反对票，因为这是 RN 显示的确切消息。不是一个有用的答案

@HungrySoul 我有同样的问题如何克服？

@SagarRS 请尝试调试您的渲染方法，并专门搜索您没有滥用函数调用的组件的道具（如 onPress、onTextChange 等）（我建议使用箭头函数）。为了调试，您可以尝试注释和取消注释渲染代码。

【参考方案3】：

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