>source

안녕하세요, 저는 현재 화면 A와 화면 B가 2 개 있습니다. 화면 A에는 모든 게시물이 포함 된 플랫리스트가 있으며 특정 게시물을 누르면 해당 게시물의 세부 정보 인 화면 B로 이동합니다.

화면 B에서는 현재 사용자가 게시물을 좋아하는지 여부에 따라 채워지거나 윤곽이 그려지는시기가 변경되는 좋아요 아이콘을 추가했습니다. 현재 사용자가 게시물을 좋아하면 그 기록이 내 데이터베이스에 저장됩니다.

내 문제는 사용자가 화면 B의 게시물을 좋아할 때 하트가 채워지지만 화면 B를 닫고 화면 A로 이동 한 다음 다시 같은 게시물의 화면 B로 이동하면 하트가 여전히 윤곽선으로 표시된다는 것입니다. 내 앱을 다시로드 할 때만 채워짐으로 변경됩니다.

화면 A :

 function PostsScreen({navigation}) {
  const [posts, setPosts] = useState([]);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);
  const loadPosts = async () => {
  setLoading(true);
  const response = await postsApi.getPosts(); //Api call to get all posts from backend
  setLoading(false);
 if (!response.ok) return setError(true);
 setError(false);
 setPosts(response.data);
 };
useEffect(() => {
loadPosts();
 }, []);
return(
<ActivityIndicator visible={loading} />
<FlatList
  data={posts}
  keyExtractor={(post) => post.id.toString()}
  renderItem={({ item }) => (
    <Card
      title={item.title}
      subTitle={item.subTitle}
      onPress={() => 
      navigation.navigate(routes.POST_DETAILS,item)}
    />
   )}
 />
);
}

ScreenB

function PostDetailsScreen({ route }) {
const post = route.params;
const { user} = useAuth();
const [addedToLikes, setAddedToLikes] = useState(post.isLiked);
const[likesCount,setLikesCount]=useState(post.likesCount)
const addToLikes = (PostId,userId) => {
postsApi.likePost({PostId,userId}); //api call to save like in backend
setAddedToLikes(!addedToLikes);
};
let show_likes="";
if(addedToLikes){
show_likes=(likesCount >1)?(("Liked by you")+" and "+(likesCount - 1)+((likesCount ==2)?( " 
other"):(" others"))):("Liked by you");
}else if(likesCount >0){
show_likes=(likesCount ==1)?(likesCount+ " like"):(likesCount + " likes");
}
return(
<TouchableOpacity onPress={() => {addToLikes(post.id,user.id)}}>
          {addedToLikes?<MaterialCommunityIcons
          name="heart"
        />:<MaterialCommunityIcons
            name="heart-outline"
          />}
</TouchableOpacity>
<View><TextInput>{show_likes}</TextInput></View>
)}

나는 컨텍스트 또는 redux를 사용하지 않습니다.

누구든지 도움을 줄 수 있다면 대단히 감사하겠습니다. 더 이상 코드가 필요하면 알려주세요.

  • 답변 # 1

    당신은 보낼 수 있습니다 indexcallback ...에 post detail 화면

    renderItem={({ item,index }) => (
        <Card
          title={item.title}
          subTitle={item.subTitle}
          onPress={() => 
          navigation.navigate(routes.POST_DETAILS,{post:item,index,updateView})}
        />
       )}
    
    

    콜백 함수를 사용하여 업데이트 list

    function PostDetailsScreen({ route }) {
    const post = route.params.post;
    const index = route.params.index;
    const updateView = route.params.updateView;
    const { user} = useAuth();
    const [addedToLikes, setAddedToLikes] = useState(post.isLiked);
    const[likesCount,setLikesCount]=useState(post.likesCount)
    const addToLikes = (PostId,userId) => {
    postsApi.likePost({PostId,userId}); 
    setAddedToLikes(!addedToLikes);
    updateView(!addedToLikes,index); // update main view
    };
    
    

    첫 화면에 기능 추가 및 목록 업데이트

    const updateView = (isLiked, index) => {
      const newPosts = [...posts];
      newPosts[index].isLiked = isLiked;
      let currentCount = newPosts[index].likesCount;
      currentCount = isLiked?currentCount+1:currentCount-1;
      newPosts[index].likesCount = currentCount;
      setPosts(newPosts);
    };
    
    

관련 자료

  • 이전 kotlin - 호출자 기능을 차단하지 않고 다른 일시 중지 기능에서 일시 중지 기능을 호출하는 방법은 무엇입니까?
  • 다음 python - Pandas Groupby 변환 내에서 열 이름에 액세스 할 수 있습니까?