I am trying to update the data in my firebase realtime database, but when I try to update it, it keep calling the console in my update function until I got maximum call stack size. I'm not sure why it keep calling the console without stop.

import React, {useEffect, useState} from 'react';
import {ScrollView, StyleSheet, Text, View} from 'react-native';
import {Button, Gap, Header, Input, Profile} from '../../components';
import {colors, getData} from '../../utils';
import {Fire} from '../../config';
import {getDatabase, ref, set, update, onValue} from 'firebase/database';
import {showMessage} from 'react-native-flash-message';

export default function UpdateProfile({navigation}) {
  const [profile, setProfile] = useState({
    fullName: '',
    profession: '',
    email: '',
  });
  const [password, setPassword] = useState('');

  useEffect(() => {
    getData('user').then(res => {
      // const data = res;
      // data.photo = {uri: res.photo};
      setProfile({
        fullName: res.data.fullName,
        profession: res.data.profession,
        email: res.data.email,
        photo: res.photo,
      });
    });
  }, []);

  const update = () => {
    console.log('profile: ', profile);
    const db = getDatabase();
    update(ref(db, `users/${profile.uid}/`), {profile})
      .then(res => {
        console.log('success: ', res);
      })
      .catch(err => {
        console.log('fak');
        showMessage({
          message: err.message,
          type: 'default',
          backgroundColor: colors.error,
          color: colors.white,
        });
      });
  };

  const changeText = (key, value) => {
    setProfile({
      ...profile,
      [key]: value,
    });
  };
  return (
    <View style={styles.page}>
      <Header title="Edit Profile" onPress={() => navigation.goBack()} />
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={styles.content}>
          <Profile isRemove photo={profile.photo} />
          <Gap height={26} />
          <Input
            label="Full Name"
            value={profile.fullName}
            onChangeText={value => changeText('fullName', value)}
          />
          <Gap height={24} />
          <Input
            label="Pekerjaan"
            value={profile.profession}
            onChangeText={value => changeText('profession', value)}
          />
          <Gap height={24} />
          <Input label="Email" value={profile.email} disable />
          <Gap height={24} />
          <Input label="Password" value={password} />
          <Gap height={40} />
          <Button title="Save Profile" onPress={update} />
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  page: {backgroundColor: colors.white, flex: 1},
  content: {padding: 40, paddingTop: 0},
});

error console

Basically the data is called from storedData('user') and put into profile. Then after giving changes to the data, I update the database.

CodePudding user response：

The problem is with the update name!

You defined some actions to get your data like getData and update. Also, your handler function name is update so when you want to update your profile by pressing the Save Profile, it caught in an infinity loop:

You call the update, then console.log work, then your code call the update, then console.log then update ... until blow the stack:)

So, simply change your handler function name:

// rest of the codes ...

const handleUpdateProfile = () => {
  const db = getDatabase();
  update(ref(db, `users/${profile.uid}/`), {profile})
    .then(res => {
      console.log('success: ', res);
     })
    .catch(err => {
      showMessage({
        message: err.message,
        type: 'default',
        backgroundColor: colors.error,
        color: colors.white,
      });
  });
}


// rest of the codes ...

<Button title={"Save Profile"} onPress={handleUpdateProfile} />

I suggest you add a prefix for your handler function to determine them easily on your codes.