네이티브 반응-아이콘 액션과 같은 상황에 반응

Nov 18 2020

현재 반응 컨텍스트를 사용하여 사용자를 저장하고 있으며 각 사용자는 원하는만큼 많은 게시물을 좋아할 수 있습니다.

백엔드에는 각 사용자의 각 게시물에 대해 true 또는 false가 될 수있는 isLiked라는 매개 변수가 있습니다.

내 코드는 다음과 같습니다.

나는 해결책을 시도했지만 내 문제는 윤곽선이있는 하트를 눌러 게시물을 좋아하면 하트로 바뀌고 이와 같은 기록이 데이터베이스에 정렬되지만 게시물을 닫고 다시 열면 변경되지 않는다는 것입니다. 변경하려면 앱을 새로 고침해야합니다.

시도 된 솔루션

Postdetailsscreen.js

const post=route.params;

  const [addedToLikes, setAddedToLikes] = useState(post.isLiked);

 const addToLikes = (PostId,userId) => {
  setAddedToLikes(!addedToLikes);
  likePost({PostId,userId});
  };


 <TouchableOpacity
 onPress={() => {
 addToLikes(post.id,user.id);
  }}
              >
{addedToLikes ? 
   <MaterialCommunityIcons
     name="heart"
      />
   : 
    <MaterialCommunityIcons
    name="heart-outline"
     />}
    </TouchableOpacity>

내 백엔드에는 현재 userId 및 postId가 내 likes 테이블에서 발견되면 isLiked가 true이고 그렇지 않으면 false라는 isLiked 매개 변수가 있습니다.

내 백엔드 코드는 다음과 같습니다.

 router.get("/",
 auth,
  async (req, res) => {
  const posts = await Post.findAll({
order: [["createdAt", "DESC"]],
include: [
  { model: User, attributes: ["id", "name", "email"] },
  { model: Post_Image, attributes: ["id", "images"] },
 ]})

  if (!posts) return res.status(404).send();

 const baseUrl = config.get("assetsBaseUrl");

 const plainPosts = posts.map((x) => x.get({ plain: true }));
const resultPosts = [];
 for (const post of plainPosts) {

  const isLiked = post.Likes.some(x => x.userId === req.user.id); 

  const { Post_Images, ...postAttributes } = listing;
   const IMAGES = Post_Images.map((postImage) => ({
  url: `${baseUrl}${postImage.images}_full.jpg`,
  thumbnailUrl: `${baseUrl}${postImage.images}_thumb.jpg`,
}));
resultPosts.push({ ...postAttributes, images: IMAGES
  ,isLiked 
});
}

 res.send(resultPosts);
});

사용자가 게시물을 좋아하면 앱을 새로 고치지 않아도 아이콘이 채워진 채로 유지되도록 누군가 나를 도울 수 있습니까?

답변

SomeoneSpecial Nov 22 2020 at 11:52

부모 구성 요소에서 소품을 가져오고 있다고 가정합니다.

const Heart = ({ isLiked }) => {
         
         const [ liked, setLiked ] = useState(false);
       
         useEffect(() => {
             setLiked(isLiked)
         },[isLiked])

         ......
}

isLiked 소품이 변경 될 때마다 상태를 업데이트하려면 useEffect를 사용하십시오.

그런 다음 부모 구성 요소에서.

const ListofPost = () => {

     const data = fetchTheData(url);
     ....


     return ( data.map( item => <Heart isLiked={item.isLiked} />) )
}