如何结合当前登录用户正确渲染likes.map()的点赞状态？

你的问题出在遍历所有点赞记录并逐个返回爱心，这会导致多个爱心叠加显示；同时0点赞时因为!isEmpty(likesData[0])的判断，直接跳过了爱心渲染。

正确的思路应该是：先判断当前用户是否给该帖子点过赞，然后只渲染一个爱心，根据判断结果切换样式，不需要遍历所有点赞记录。

修复后的代码 #

<div className="home-icon-post" onClick={handleLikes}>
  {/* 检查当前用户是否给该帖子点过赞 */}
  const hasLiked = likesData.some(like => 
    like.id === userData.id && like.idComment === comment.idObject
  );

  {/* 根据点赞状态渲染对应的爱心 */}
  <FontAwesomeIcon 
    className={hasLiked ? "heartFull" : "iconEmpty"} 
    icon={hasLiked ? ["fa", "heart"] : ["fa", "heart-o"]} 
  />
</div>

关键修改点 #

1. 用some()替代遍历判断：some()会检查数组中是否存在符合条件的元素，只要找到当前用户的点赞记录就返回true，否则false，一次判断就能确定用户的点赞状态。
2. 移除空数组判断：即使没有任何点赞记录，hasLiked会是false，正常渲染空心爱心，解决0点赞时不显示的问题。
3. 只渲染单个爱心：不管有多少人点赞，都只显示当前用户对应的状态，不会出现实心、空心爱心同时显示的情况。

补充说明 #

如果使用的是新版FontAwesome，实心/空心图标前缀需要调整为fa-solid和fa-regular，示例：

icon={hasLiked ? ["fa-solid", "heart"] : ["fa-regular", "heart"]}

内容的提问来源于stack exchange，提问作者Elodie Jean