【问题标题】:React-Native = Invariant Violation: Maximum update depth exceededReact-Native = Invariant Violation:超过最大更新深度
【发布时间】: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 })} 并运行它

标签: react-native


【解决方案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(终止并再次打开)。我不知道,但它对我有用。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-12-03
    • 1970-01-01
    • 2021-01-18
    • 2022-01-16
    • 2019-12-03
    • 2019-04-03
    • 2019-12-13
    • 2019-05-28
    相关资源
    最近更新 更多