尝试更新配置文件数据时超出最大调用堆栈大小 - React Native

Posted 2023-04-19

【中文标题】尝试更新配置文件数据时超出最大调用堆栈大小 - React Native

【英文标题】：Maximum call stack size exceeded when trying to update profile data - React Native

【发布时间】：2021-12-14 08:08:09

【问题描述】：

我正在尝试更新我的 firebase 实时数据库中的数据，但是当我尝试更新它时，它会继续在我的更新函数中调用控制台，直到我获得最大调用堆栈大小。我不知道为什么它不停地调用控制台。

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

基本上数据是从 storedData('user') 调用并放入配置文件。然后在对数据进行更改后，我更新数据库。

【参考方案1】：

问题出在update 名称上！

您定义了一些操作来获取您的数据，例如 getData 和 update。 此外，您的处理函数名称是update，因此当您想通过按Save Profile 更新您的配置文件时，它陷入了无限循环：

您调用update，然后console.log 工作，然后您的代码调用update，然后console.log，然后update ...直到炸毁堆栈：)

所以，只需更改您的处理函数名称：

// 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 />

我建议您为处理函数添加一个前缀，以便在您的代码中轻松确定它们。