当前位置: 首页 > 知识库问答 >
问题:

引用值时出错:超出最大更新深度

黄成荫
2023-03-14

当我运行我的代码时,我收到了这个错误。

错误:超过了最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时,会发生这种情况。React限制嵌套更新的数量,以防止无限循环。这是我的代码

import React, { Component, useState } from 'react';
import {View, StyleSheet,Button,Text, Image,Alert, } from 'react-native';
import { ScrollView, TextInput, ListItem, TouchableOpacity } from 'react-native-gesture-handler';
import firebase from '../database/firebaseDb';
import Index from './list';
import { useNavigation} from '@react-navigation/native';


export default class Profiles extends React.Component{

    static navigationOptions = {  
        title: 'Profile',  
        headerStyle: {  
            backgroundColor: '#f4511e',  
        },  
        //headerTintColor: '#0ff',  
        headerTitleStyle: {  
            fontWeight: 'bold',  
        },  
    };  

   constructor(props){
       super();

       this.state={
           email_user : props.route.params.email_user,
           password_user : props.route.params.password_user,
           id : '',
           name_user: '',
           first_name_user: '',
       }
      }

      dataBase(){
        var userId = firebase.auth().currentUser.uid;

        let shopRef = firebase.database().ref('User/' + userId);
        var id = [];
        var i =0;
        shopRef.on("value",(snapshot) => {
        snapshot.forEach((childSnapshot) => {
            i = i+1;
                id[i] = childSnapshot.val();             
        });
        
        this.setState({
            first_name_user : id[3],
        })
    //   console.log(this.state.first_name_user);
        });
       

        }

    render(){       
          
        return(
            <View>
               
                <View >
                    {/* <Text>Cover photo</Text> */}
                    <Image
                        style={styles.coverStyle}
                        source={require('../images/cover.jpg')}
                    />
                </View>

                <View style={styles.pdpStyle}>
                    {/* <Text>Photo profile</Text> */}
                    <Image
                    style={styles.photoPdpStyle}
                    source={require('../images/femme.jpeg')}
                    />
                </View>

                <View style={styles.nomStyle}>
                    <Text style={styles.textStyle}>{this.state.first_name_user}</Text>
                </View>

                <View style={styles.pubStyle}>
                    <Button
                        title={"Add"}
                        style={styles.btnStyle}
                    />
                    
                    <TextInput
                        placeholder={'Enter your Ads'}
                        style={styles.txtInputStyle}
                    />
                  
                    <Image 
                    style={styles.imgStyle}
                    source={require('../images/photo.png')} 
                    
                    />
                </View>

                <View style={styles.pubAdd}>

                    <View style={styles.AlignPubStyle}>
                        <Image 
                            style={styles.pubImg}
                            source={require('../images/femme.jpeg')}
                        />
                        <Text style={styles.nameTxtStyle}>
                            Your name
                        </Text>

                    </View>
                <Text >
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                  when an unknown printer took a galley of type and scrambled it to make a type 
                  specimen book. It has survived not only five centuries, but also the leap into 
               electronic typesetting, remaining essentially unchanged.  Ipsum passages, and more
                 
                </Text>

                <View style={styles.AlignPubCommentStyle}>
                        <Image 
                            style={styles.likeImg}
                            source={require('../images/like.png')}
                        />
                       <TextInput
                            style={styles.txtInputComment}
                            placeholder={'Your comment'}
                       />

                       <View >
                        <TouchableOpacity style={styles.appButtonContainer} onPress={
                            this.dataBase()
                        }>
                            <Text style={styles.appButtonText}>
                                Send
                            </Text>
                        </TouchableOpacity>
                    </View>
                    </View>
            </View>
            
         </View>

        );
    }
}
 

我是用react native编写代码的初学者。我只想得到first_name_user的值,但当我通过this.state调用这个值时。first_name_user,然后出现错误。我已经看到了同一个问题的所有答案,但他们无法解决我的问题。你能帮我吗。

共有1个答案

欧阳衡
2023-03-14

我不是100%确定就是这样,但这是一个可能的解释,在您的数据库函数中,您创建了一个侦听器(on("value",…))。

因此,单击几次之后,您就有大量侦听器触发setState,这可能是因为渲染太多了。

你可以试试这样的方法:

dataBase(){
    var userId = firebase.auth().currentUser.uid;

    let shopRef = firebase.database().ref('User/' + userId);
    var id = [];
    var i =0;
    const updateCallback = ()=> new Promise((resolve) => {
        (snapshot) => {
            snapshot.forEach((childSnapshot) => {
                i = i+1;
                id[i] = childSnapshot.val();             
            });

            this.setState({
                first_name_user : id[3],
            }, resolve())
        }
    })
    shopRef.on("value", updateCallback);
    updateCallback().then(() =>{
        shopRef.off("value", updateCallback);
    })

}

如果有帮助,请告诉我,检查实施情况,但你明白了。

 类似资料:
  • 问题内容: 我试图在ReactJS中切换组件的状态,但出现错误: 超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时,可能会发生这种情况。React限制了嵌套更新的数量,以防止无限循环。 我在代码中看不到无限循环,有人可以帮忙吗? ReactJS组件代码: 问题答案: 那是因为您在render方法中调用了toggle

  • 我在代码中没有看到无限循环,有人能帮忙吗? ReactJS组件代码:

  • 我在React中运行我的应用程序时收到一个错误。这个错误有很多问题,但我不知道如何解决它。当我按下链接时,它会指向登录组件。“http://localhost:3000/login” 这是我在网站上得到的错误: “已超出最大更新深度。当组件重复调用组件内部的 setState 时,可能会发生这种情况“组件将更新”或“组件更新”。React 限制了嵌套更新的数量,以防止无限循环。 这是我的登录页面:

  • 我正在用React做我的前几个实验,在这个组件中,我调用了一个外部API来获取所有NBA玩家的列表,通过作为组件道具接收的teamId过滤它们,最后呈现过滤玩家的标记。 一个需要考虑的问题是,由于我调用了API并获得了一个大列表,所以我将它保持在组件的状态,以便对该组件的新调用将使用该状态,而不是再次调用API。这不是生产代码,我没有API,所以我这样做是因为我收到了“太多请求”消息,因为我一直在

  • 使用React 16.8,我已经用useReucer、useContext钩子实现了我的项目,并创建了一个类似于Redux的全局状态管理系统。 在视图中,当我试图在useEffect中获取数据时,它会导致最大更新深度错误。 我已经尝试了Facebook React-Hooks常见问题解答中的所有示例,但无法解决问题。 我的package.json是这样的: 下面是我的代码示例: 这里是风景。js

  • 我目前收到Maxiumum更新深度错误,不知道为什么。在我的代码中看不到无限循环。 "超过了最大更新深度。当组件在useEffect内部调用setState时,可能会发生这种情况,但useEffect要么没有依赖关系数组,要么其中一个依赖关系在每次渲染时都会发生变化。 此处显示错误 ReactJS组件代码: 下面的代码似乎有错误:超过了最大更新深度。当组件在useEffect中调用setState