如何在React中用map渲染元素时实现单个元素的点赞/取消点赞功能

你现在的问题根源是用了单个布尔值状态控制所有帖子的点赞/喜欢状态，所有帖子共享同一个状态变量，点任何一个都会触发全局状态变化，自然所有帖子跟着变。要让每个帖子的状态独立，得把状态改成按帖子ID存储的结构，具体做法如下：

1. 重构状态存储结构 #

把原来的单个like、heart布尔值，改成以帖子ID为键的对象，用来记录每个帖子的点赞/喜欢状态：

// 初始化空对象，也可以从Firebase获取已有的点赞状态填充
const [likedPosts, setLikedPosts] = useState({});
const [heartedPosts, setHeartedPosts] = useState({});

2. 修改渲染判断逻辑 #

渲染每个帖子时，根据当前帖子ID在状态对象里的值，决定显示已点赞/未点赞的图标：

// 点赞按钮部分
{likedPosts[item.id] ? (
  <ThumbUpIcon
    className=" cursor-pointer text-blue-600 hover:bg-gray-100 px-2 py-2 hover:rounded-md"
    fontSize="large"
    onClick={() => handleLikeToggle(item.id)}
  />
) : (
  <ThumbUpOutlinedIcon
    className=" cursor-pointer text-gray-500 hover:bg-gray-100 px-2 py-2 hover:rounded-md"
    fontSize="large"
    onClick={() => handleLikeToggle(item.id)}
  />
)}

// 喜欢按钮部分
{heartedPosts[item.id] ? (
  <FavoriteOutlinedIcon
    className=" cursor-pointer text-red-500 hover:bg-gray-100 px-2 py-2 hover:rounded-md"
    fontSize="large"
    onClick={() => handleHeartToggle(item.id)}
  />
) : (
  <FavoriteBorderOutlinedIcon
    className=" cursor-pointer text-gray-500 hover:bg-gray-100 px-2 py-2 hover:rounded-md"
    fontSize="large"
    onClick={() => handleHeartToggle(item.id)}
  />
)}

3. 编写独立的状态更新函数 #

专门写两个函数处理单个帖子的状态切换，避免直接在onClick里写复杂逻辑：

// 切换点赞状态
const handleLikeToggle = (postId) => {
  setLikedPosts(prevState => ({
    ...prevState,
    [postId]: !prevState[postId] // 只修改当前帖子ID对应的状态
  }));
  // 同步更新Firebase数据，示例：更新帖子点赞数
  const postRef = doc(db, "posts", postId);
  updateDoc(postRef, {
    likeCount: increment(likedPosts[postId] ? -1 : 1)
    // 如果要记录用户，可更新likedBy数组：arrayUnion/arrayRemove当前用户ID
  });
};

// 切换喜欢状态
const handleHeartToggle = (postId) => {
  setHeartedPosts(prevState => ({
    ...prevState,
    [postId]: !prevState[postId]
  }));
  // 同步更新Firebase的喜欢数据
  const postRef = doc(db, "posts", postId);
  updateDoc(postRef, {
    heartCount: increment(heartedPosts[postId] ? -1 : 1)
  });
};

4. 从Firebase同步初始状态 #

组件挂载时，从Firebase拉取每个帖子的点赞/喜欢状态，填充到前端状态里，确保初始显示正确：

useEffect(() => {
  const initialLiked = {};
  const initialHearted = {};
  posts.forEach(post => {
    // 根据Firebase里的字段设置初始状态，比如判断当前用户是否已点赞
    initialLiked[post.id] = post.likedBy?.includes(currentUserId) || false;
    initialHearted[post.id] = post.heartedBy?.includes(currentUserId) || false;
  });
  setLikedPosts(initialLiked);
  setHeartedPosts(initialHearted);
}, [posts, currentUserId]);

这样修改后，每个帖子的点赞/喜欢状态都是独立存储、独立更新的，点击某一个帖子的按钮只会改变该帖子的状态，不会影响其他帖子。

内容的提问来源于stack exchange，提问作者Gurudatt Puranik