• 0

مامعنى هذه الرسالة وكيف اعالجها react native

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

 

import React, {useState} from 'react';
import {Text, StyleSheet, Image, View, TouchableOpacity} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Feather';
import Picker from 'react-native-image-crop-picker';

import LongButton from '../../components/buttons/LongButton';
import NavigationHeader from '../../components/shared/NavigationHeader';
import SafeView from '../../components/shared/SafeView';
import BasicInput from '../../components/textInputs/BasicInput';
import {phoneHeight, phoneWidth} from '../../theme/Dimensions';
import {MyColors} from '../../theme/MyColos';
import {MyFonts} from '../../theme/MyFonts';

export default function UpdateProfileScreen({route}: any) {
  const navigation = useNavigation();
  const item = route.params;
  const [userImage, setUserImage] = useState(item.image);
  const [canEditName, setCanEditName] = useState(false);
  const [canEditPhone, setCanEditPhone] = useState(false);
  const [canEditEmail, setCanEditEmail] = useState(false);

  const openGallery = () => {
    Picker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
    }).then(image => {
      console.log(image);
      setUserImage(image.path);
    });
  };

  return (
    <SafeView style={styles.container}>
      <NavigationHeader
        title="تعديل بيانات الحساب"
        onBackPress={() => navigation.goBack()}
      />
      <View>
        <Image source={{uri: userImage}} style={styles.userImage} />
        <TouchableOpacity style={styles.cameraContainer} onPress={openGallery}>
          <Icon name="camera" size={phoneHeight * 0.03} color="white" />
        </TouchableOpacity>
      </View>

      <Text style={styles.inputLabel}>اسم المستخدم</Text>
      <BasicInput
        hasIcon
        defaultValue={item.name}
        iconName="edit"
        iconColor={canEditName ? MyColors.darkAqua : MyColors.gray}
        editable={canEditName}
        onPress={() => setCanEditName(!canEditName)}
      />

      <Text style={styles.inputLabel}>رقم الجوال</Text>
      <BasicInput
        hasIcon
        defaultValue={item.phone}
        iconName="edit"
        iconColor={canEditPhone ? MyColors.darkAqua : MyColors.gray}
        editable={canEditPhone}
        onPress={() => setCanEditPhone(!canEditPhone)}
      />

      <Text style={styles.inputLabel}>البريد الإلكترونى</Text>
      <BasicInput
        hasIcon
        defaultValue={item.email}
        iconName="edit"
        iconColor={canEditEmail ? MyColors.darkAqua : MyColors.gray}
        editable={canEditEmail}
        onPress={() => setCanEditEmail(!canEditEmail)}
      />
      <Text
        onPress={() => navigation.navigate('UpdatePassword')}
        style={styles.forgetPassword}>
        تعديل كلمة المرور
      </Text>

      <LongButton
        style={styles.button}
        title="حفظ التغييرات"
        onPress={() => console.log('Save')}
      />
    </SafeView>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  inputLabel: {
    alignSelf: 'flex-end',
    fontFamily: MyFonts.Medium,
    fontSize: 15,
    color: MyColors.darkBlue,
    marginRight: phoneWidth * 0.1,
    marginVertical: phoneHeight * 0.01,
    marginTop: phoneHeight * 0.02,
  },
  forgetPassword: {
    alignSelf: 'flex-end',
    fontFamily: MyFonts.Medium,
    fontSize: 15,
    color: MyColors.darkAqua,
    marginRight: phoneWidth * 0.1,
    marginVertical: phoneHeight * 0.01,
    marginTop: phoneHeight * 0.02,
  },
  button: {
    marginTop: 50,
  },
  cameraContainer: {
    height: phoneHeight * 0.06,
    width: phoneHeight * 0.06,
    zIndex: 1,
    position: 'relative',
    bottom: phoneHeight * 0.06,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: MyColors.darkAqua,
    borderRadius: phoneHeight * 0.03,
  },
  userImage: {
    height: phoneHeight * 0.2,
    width: phoneHeight * 0.2,
    borderRadius: phoneHeight * 0.1,
  },
});

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1

حاول عمل تنظيف clear :

useEffect(() => {
    myFunction();   // استدعاء الدالة
    return () => {
      setState({}); // تنظيف الحالة
    };
}, []);

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن