Блог

В настоящее время я сохраняю своего пользователя, используя контекст реакции, каждый пользователь может лайкать столько сообщений, сколько захочет.

у меня есть параметр с именем isLiked в моем бэкэнде, который может быть либо true, либо false для каждого сообщения для каждого пользователя.

Вот мой код:

Я попытался решить проблему, моя проблема в том, что когда я нажимаю на выделенное сердечко, чтобы лайкнуть сообщение, оно меняется на сердечко, и запись этого лайка сортируется в моей базе данных, но когда я закрываю сообщение и открываю его снова, оно не меняется, мне нужно обновить приложение, чтобы оноизменение.

попытка решения

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>
 

в моем бэкэнде у меня есть параметр isLiked, который, если текущий идентификатор пользователя и postID найдены в моей таблице likes, тогда isLiked имеет значение true, в противном случае false.

вот мой внутренний код:-

  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);
});
 

Может кто-нибудь помочь мне с этим, если пользователю понравился пост, значок остается заполненным даже без обновления приложения?

Предполагая, что вы получаете реквизиты из родительского компонента.

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

         ......
}
 

используйте useEffect, чтобы убедиться, что вы обновляете свое состояние всякий раз, когда изменяется isLiked prop.

Затем в вашем родительском компоненте.

 const ListofPost = () => {

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


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