How can I react native cleanup func?

  javascript, react-native, reactjs

I’m doing a simple social media and when I make a likes system, the state changes on the home page, but not on the profile page and gives such an error
cleanup error

PostCardController.js

import React, { useState } from 'react';
import { View } from 'react-native';
// import PropTypes from 'prop-types';

// Cards
import AgendaPostCard from './cards/AgendaPostCard';
import HomePostCard from './cards/HomePostCard';
import HumorPostCard from './cards/HumorPostCard';

const PostCardController = ({ PostType, PostData, session }) => {
  if (PostData === undefined) {
    return <></>;
  }

  // PostData and PostType coming as props

  const [ViewerLiked, SetViewerLiked] = useState(PostData.viewer_has_liked);
  const [ViewerSaved, SetViewerSaved] = useState(PostData.viewer_has_saved);

  return (
    <View style={{ paddingLeft: 10, paddingRight: 10, paddingBottom: 16 }}>
      {PostType === 'Agenda' && (
      <AgendaPostCard
        key={PostData.uuid}
        uuid={PostData.uuid}
        userName={PostData.owner.username}
        Useruuid={PostData.owner.uuid}
        content={PostData.content}
        like={PostData.like_count}
        comment={PostData.comment_count}
        Useravatar={PostData.owner.AvatarUrl}
        picture={PostData.pictureUrl}
        is_video={PostData.is_video}
        is_picture={PostData.is_picture}
        mimetype={PostData.mimetype}
        viewer_has_liked={PostData.viewer_has_liked}
        viewer_has_saved={PostData.viewer_has_saved}
        session={session}
        ViewerLiked={ViewerLiked}
        SetViewerLiked={SetViewerLiked}
        ViewerSaved={ViewerSaved}
        SetViewerSaved={SetViewerSaved}
      />
      )}
      {PostType === 'HomePost' && (
        <HomePostCard
          key={PostData.uuid}
          uuid={PostData.uuid}
          userName={PostData.owner.username}
          Useruuid={PostData.owner.uuid}
          content={PostData.content}
          like={PostData.like_count}
          comment={PostData.comment_count}
          Useravatar={PostData.owner.AvatarUrl}
          picture={PostData.pictureUrl}
          is_video={PostData.is_video}
          is_picture={PostData.is_picture}
          mimetype={PostData.mimetype}
          viewer_has_liked={PostData.viewer_has_liked}
          viewer_has_saved={PostData.viewer_has_saved}
          session={session}
          ViewerLiked={ViewerLiked}
          SetViewerLiked={SetViewerLiked}
          ViewerSaved={ViewerSaved}
          SetViewerSaved={SetViewerSaved}
        />
      )}
      {PostType === 'Humor' && (
      <HumorPostCard
        key={PostData.uuid}
        uuid={PostData.uuid}
        userName={PostData.owner.username}
        Useruuid={PostData.owner.uuid}
        content={PostData.content}
        like={PostData.like_count}
        comment={PostData.comment_count}
        Useravatar={PostData.owner.AvatarUrl}
        picture={PostData.pictureUrl}
        is_video={PostData.is_video}
        is_picture={PostData.is_picture}
        mimetype={PostData.mimetype}
        viewer_has_liked={PostData.viewer_has_liked}
        viewer_has_saved={PostData.viewer_has_saved}
        session={session}
        ViewerLiked={ViewerLiked}
        SetViewerLiked={SetViewerLiked}
        ViewerSaved={ViewerSaved}
        SetViewerSaved={SetViewerSaved}
      />
      )}
    </View>
  );
};

export default PostCardController;

HomePostCard

import React, { useEffect, useRef, useState } from 'react';
import {
  View, StyleSheet, Image, TouchableOpacity,
} from 'react-native';
import { Text, Icon } from 'react-native-elements';
import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
import { Modalize } from 'react-native-modalize';
import { Button } from '../../../../ui/index';

import {
  ExplorePost,
  GetPosts,
  PostLike,
  PostSave,
  RemoveSaved,
  SavedPostQuery,
  UnLike,
  UserProfile,
} from '../../../../request';

function HomePostCard(props) {
  const {
    picture,
    uuid,
    userName,
    content,
    like,
    comment,
    Useravatar,
    is_picture,
    is_video,
    mimetype,
    viewer_has_liked,
    viewer_has_saved,
    session,
    ViewerLiked,
    SetViewerLiked,
    Useruuid,
    navigation,
  } = props;
  const CountLike = parseInt(like, 10);

  const [postuuid, Setpostuuid] = useState(uuid);
  const [PostUuid, SetPostUuid] = useState(uuid);
  const [postUuid, SetpostUuid] = useState(uuid);
  const [UserName, setUserName] = useState(userName);
  const [LikedCount, SetLikedCount] = useState(CountLike);
  const [Saved, SetSaved] = useState(viewer_has_saved);
  const [IsReportPressIn, SetIsReportPressIn] = useState(false);
  const [IsUnfollowPressIn, SetIsUnfollowPressIn] = useState(false);
  const [IsDeletePressIn, SetIsDeletePressIn] = useState(false);

  const [LikePost, { loading: LikeLoading }] = useMutation(PostLike);
  const [SavedPost, { loading: SaveLoading }] = useMutation(PostSave);
  const [UnLikePost] = useMutation(UnLike);
  const [RemoveSavedPost] = useMutation(RemoveSaved);

  const SavedQuery = useQuery(SavedPostQuery);
  const PostQuery = useQuery(GetPosts, {
    variables: { PostType: 'HomePost' },
  });
  const ExplorePostQuery = useQuery(ExplorePost);
  const [userPorfileIsprivate] = useLazyQuery(UserProfile);

  useEffect(() => {
    if (UserName) {
      userPorfileIsprivate({ variables: { UserName } });
    }
    PostQuery.refetch();
    ExplorePostQuery.refetch();
    SavedQuery.refetch();
  }, [UserName, userPorfileIsprivate]);

  const UnLikeClick = () => {
    SetViewerLiked(false);
    SetLikedCount(LikedCount - 1);
    SetpostUuid(uuid);
    setUserName(userName);
    UnLikePost({
      variables: { postUuid },
      refetchQueries: [
        { query: GetPosts, variables: { PostType: 'HomePost' } },
        { query: SavedPostQuery },
        {
          query: UserProfile,
          variables: { UserName: session.activeUser.username },
        },
        { query: ExplorePost },
      ],
    }).then(({ data }) => {
      // console.log(data);
      SavedQuery.refetch();
      PostQuery.refetch();
      // console.log('State', ViewerLiked);
      // console.log('Backend', viewer_has_liked);
    });
    // console.log('State', ViewerLiked);
    // console.log('Backend', viewer_has_liked);
  };

  const PostLikeClick = () => {
    SetViewerLiked(true);
    SetLikedCount(LikedCount + 1);
    Setpostuuid(uuid);
    setUserName(userName);
    LikePost({
      variables: { postuuid },
      refetchQueries: [
        { query: GetPosts, variables: { PostType: 'HomePost' } },
        { query: SavedPostQuery },
        {
          query: UserProfile,
          variables: { UserName: session.activeUser.username },
        },
        { query: ExplorePost },
      ],
    }).then(({ data }) => {
      // console.log(data);
      SavedQuery.refetch();
      PostQuery.refetch();
      // console.log('State', ViewerLiked);
      // console.log('Backend', viewer_has_liked);
    });
  };

  const PostSaveClick = () => {
    setUserName(userName);
    SetSaved(true);
    SetPostUuid(uuid);
    SavedPost({
      variables: { PostUuid },
      refetchQueries: [
        { query: GetPosts, variables: { PostType: 'HomePost' } },
        { query: SavedPostQuery },
        {
          query: UserProfile,
          variables: { UserName: session.activeUser.username },
        },
        { query: ExplorePost },
      ],
    });
  };

  const RemoveSavedClick = () => {
    setUserName(userName);
    SetSaved(false);
    SetPostUuid(uuid);
    RemoveSavedPost({
      variables: { PostUuid },
      refetchQueries: [
        { query: GetPosts, variables: { PostType: 'HomePost' } },
        { query: SavedPostQuery },
        {
          query: UserProfile,
          variables: { UserName: session.activeUser.username },
        },
        { query: ExplorePost },
      ],
    }).then(() => {
      SavedQuery.refetch();
      PostQuery.refetch();
    });
  };

  const modalizeRef = useRef(null);

  const onOpen = () => {
    modalizeRef.current?.open();
  };

  return (
    <View style={style.brd}>
      <View style={style.pdg}>
        <View style={{ display: 'flex', flexDirection: 'column' }}>
          {/* Header kısmı userName falan olacak yer */}
          <View style={style.UserHeader}>
            <View style={style.UserHeader_Image}>
              <Image
                source={{ uri: Useravatar }}
                style={{ width: '100%', height: '100%', borderRadius: 999 }}
              />
            </View>
            <View style={{ flexDirection: 'row' }}>
              <View style={style.UserHeader_UserName}>
                <Button
                  style={{ justifyContent: 'flex-start' }}
                  onPress={() => {
                    navigation.navigate('Profil', {
                      screen: 'Profil',
                      params: {
                        UserName,
                      },
                    });
                  }}
                >
                  <Text style={{ fontSize: 17, color: '#fff' }}>
                    {userName}
                  </Text>
                </Button>
                <View>
                  <Text style={{ fontSize: 11, color: 'grey' }}>2 HOURS AGO</Text>
                </View>
              </View>
            </View>
            <View style={style.right}>
              <Button activeOpacity={0.8} onPress={onOpen}>
                <Icon name="more-horiz" color="#fff" />
              </Button>
            </View>
          </View>

          <View>
            {/* birincisi text kısmı ikincisi video img falan */}
            <View style={style.content}>
              <View style={style.ctx}>
                <View style={style.contenxs}>
                  <View style={{ margin: 0 }}>
                    <Text style={style.text}>
                      {content}
                    </Text>
                  </View>
                </View>
              </View>
            </View>

            {
              is_picture && (
              <View style={style.Image}>
                <Image
                  source={{ uri: picture }}
                  style={{
                    height: 200,
                    width: null,
                    resizeMode: 'stretch',
                    flexGrow: 1,
                    borderRadius: 4,
                  }}
                />
              </View>
              )
            }

            {/* Like, Comment, Save here */}
            <View style={style.footer}>
              <View style={style.footer_mrg}>
                <View style={{ display: 'flex' }}>
                  <View
                    style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      justifyContent: 'space-evenly',
                      width: '100%',
                    }}
                  >
                    <View style={style.footer_left}>
                      <TouchableOpacity
                        onPress={ViewerLiked ? UnLikeClick : PostLikeClick}
                        key={uuid}
                        disabled={LikeLoading}
                        activeOpacity={0.5}
                      >
                        {ViewerLiked ? (
                          <Icon
                            name={ViewerLiked ? 'heart' : 'heart-outline'}
                            type="material-community"
                            size={32}
                            borderRadius={9999}
                            color={ViewerLiked ? 'red' : 'white'}
                          />
                        ) : (
                          <Icon
                            name={viewer_has_liked ? 'heart' : 'heart-outline'}
                            type="material-community"
                            size={32}
                            borderRadius={9999}
                            color={viewer_has_liked ? 'red' : 'white'}
                          />
                        )}
                      </TouchableOpacity>
                      <Text
                        style={{
                          left: 10,
                          fontSize: 17,
                          fontWeight: '700',
                          color: '#fff',
                        }}
                      >
                        {LikedCount}
                      </Text>
                    </View>

                    <View style={style.footer_left}>
                      <TouchableOpacity>
                        <Icon
                          name="comment"
                          type="octicon"
                          size={32}
                          color="white"
                        />
                      </TouchableOpacity>
                      <Text
                        style={{
                          left: 10,
                          fontSize: 17,
                          fontWeight: '700',
                          color: '#fff',
                        }}
                      >
                        {comment}
                      </Text>
                    </View>

                    <TouchableOpacity
                      onPress={Saved ? RemoveSavedClick : PostSaveClick}
                      activeOpacity={0.5}
                      disabled={SaveLoading}
                    >
                      <View>
                        <Icon
                          name={Saved ? 'shield' : 'shield-outline'}
                          type={Saved ? 'materia-icons' : 'material-community'}
                          color="white"
                          size={32}
                        />
                      </View>
                    </TouchableOpacity>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
      <Modalize
        ref={modalizeRef}
        modalHeight={session.activeUser.uuid === Useruuid ? 150 : 100}
        modalStyle={{
          backgroundColor: '#808080',
        }}
      >
        <View
          style={{
            flex: 1,
            height: 150,
          }}
        >
          <Button
            style={[
              style.ModalButton,
              {
                backgroundColor: IsReportPressIn ? '#505050' : '#26282b',
                borderTopLeftRadius: 12,
                borderTopRightRadius: 12,
              },
            ]}
            onPressIn={() => {
              SetIsReportPressIn(!IsReportPressIn);
              SetIsUnfollowPressIn(false);
            }}
            onPressOut={() => {
              SetIsReportPressIn(!IsReportPressIn);
              SetIsUnfollowPressIn(false);
            }}
          >
            <Icon name="report" color="#fff" style={{ marginRight: 10 }} />

            <Text style={style.ModalText}>Report</Text>
          </Button>

          <Button
            style={[
              style.ModalButton,
              { backgroundColor: IsUnfollowPressIn ? '#505050' : '#26282b' },
            ]}
            onPressIn={() => {
              SetIsUnfollowPressIn(!IsUnfollowPressIn);
              SetIsReportPressIn(false);
            }}
            onPressOut={() => {
              SetIsUnfollowPressIn(!IsUnfollowPressIn);
              SetIsReportPressIn(false);
            }}
          >
            <Icon name="user-unfollow" type="simple-line-icon" color="#fff" size={18} style={{ marginRight: 10 }} />
            <Text style={style.ModalText}>Unfollow</Text>
          </Button>
          {
            session.activeUser.uuid === Useruuid && (
            <Button
              style={[
                style.ModalButton,
                { backgroundColor: IsDeletePressIn ? '#505050' : '#26282b' },
              ]}
              onPressIn={() => {
                SetIsDeletePressIn(!IsDeletePressIn);
                SetIsReportPressIn(false);
                SetIsUnfollowPressIn(false);
              }}
              onPressOut={() => {
                SetIsDeletePressIn(!IsDeletePressIn);
                SetIsDeletePressIn(false);
                SetIsDeletePressIn(false);
              }}
            >
              <Icon name="trash-alt" type="font-awesome-5" color="#dc3545" size={18} style={{ marginRight: 10 }} />
              <Text style={[style.ModalText, { color: '#dc3545' }]}>Delete this post</Text>
            </Button>
            )
          }
        </View>
      </Modalize>
    </View>
  );
}

const style = StyleSheet.create({
  brd: {
    backgroundColor: '#121212',
    marginTop: 16,
    borderRadius: 5,
    position: 'relative',
    zIndex: 0,
    width: '100%',
  },
  pdg: {
    padding: 5,
  },
  UserHeader: {
    padding: 12,
    marginBottom: 10,
    borderBottomColor: '#BFBFBF',
    borderBottomWidth: 1,
    flexDirection: 'row',
    width: '100%',
  },
  UserHeader_Image: {
    backgroundColor: 'grey',
    height: 50,
    width: 50,
    borderRadius: 50,
  },
  UserHeader_UserName: {
    flexGrow: 1,
    marginLeft: 10,
  },
  content: {
    paddingBottom: 15,
    paddingRight: 15,
    paddingTop: 5,
    paddingLeft: 5,
  },
  ctx: {
    marginBottom: -5,
    marginTop: -5,
    flexDirection: 'column',
    fontFamily: 'inherit',
  },
  contenxs: {
    marginTop: 5,
    marginBottom: 5,
    fontFamily: 'Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif',
    color: '#fff',
    fontWeight: 'normal',
    fontSize: 17,
    textAlign: 'left',
    minWidth: 0,
    maxWidth: '100%',
    lineHeight: 1.3333,
  },
  text: {
    marginTop: 5,
    marginBottom: 5,
    fontFamily: 'Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif',
    color: '#fff',
    fontWeight: 'normal',
    fontSize: 17,
    textAlign: 'left',
    minWidth: 0,
    maxWidth: '100%',
  },
  footer: {
    borderTopColor: '#fff',
    borderTopWidth: 1,
    marginTop: 10,
    flexDirection: 'row',
  },
  footer_mrg: {
    margin: 10,
    flexDirection: 'row',
  },
  footer_left: {
    marginRight: 16,
    flexDirection: 'row',
    alignItems: 'center',
  },
  Image: {
    width: '100%',
    borderRadius: 4,
  },
  right: {
    marginLeft: 'auto',
  },
  ButtonHeight: {
    height: 50,
    borderBottomColor: '#fff',
    borderBottomWidth: 1,
    width: '100%',
  },
  ModalButton: {
    height: 50,
    padding: 12,
    width: '100%',
    justifyContent: 'flex-start',
  },
  ModalText: {
    color: '#fff',
    fontSize: 16,
  },
});

export default HomePostCard;

HomeScreen

ProfileScreen

It happens when you like it on the Home Screen, but it doesn’t work on the other Screen.

Source: Ask Javascript Questions

LEAVE A COMMENT