React前端帖子点赞功能异常：刷新后点赞状态丢失求助

核心问题点 #

1. 状态初始化错误：你把点赞图标用数组包裹初始化useState([...])，导致like是数组类型，后续和likeIcon（单个图标值）做相等判断时永远不成立，逻辑会出现异常。
2. 状态更新依赖闭包旧值：直接用count+1/count-1更新状态，可能因为闭包捕获旧值导致状态不同步。
3. 刷新后未获取最新帖子数据：页面刷新后组件重新初始化，若依赖的post还是旧数据，点赞状态自然会回到初始的旧状态。

修正后的点赞逻辑代码 #

const [like, setLike] = useState(post.like.includes(userId) ? anotherLikeIcon : likeIcon);
const [count, setCount] = useState(post.like.length);

const handleLike = async() => {
  try {
    const isCurrentlyLiked = like === likeIcon;
    // 修正Content-Type的拼写错误（json小写）
    await fetch(`http://localhost:5000/api/post/${post._id}/like`, {
      method: "PUT", 
      headers: {
        'Content-Type': "application/json",
        token: accessToken
      }
    });
    
    // 用函数式更新确保状态基于最新值
    setLike(isCurrentlyLiked ? anotherLikeIcon : likeIcon);
    setCount(prevCount => isCurrentlyLiked ? prevCount + 1 : prevCount - 1);
  } catch (error) {
    console.error('点赞操作出错:', error);
  }
}

解决刷新后状态消失的问题 #

刷新页面后，需要确保组件能获取到后端最新的帖子数据，添加useEffect在组件挂载时拉取最新帖子：

import { useEffect } from 'react';

// ... 其他组件代码

useEffect(() => {
  const getLatestPost = async () => {
    try {
      const response = await fetch(`http://localhost:5000/api/post/${post._id}`, {
        headers: { token: accessToken }
      });
      const latestPost = await response.json();
      // 更新点赞状态和计数为最新值
      setLike(latestPost.like.includes(userId) ? anotherLikeIcon : likeIcon);
      setCount(latestPost.like.length);
    } catch (err) {
      console.error('获取最新帖子失败:', err);
    }
  };

  getLatestPost();
}, [post._id, userId, accessToken]);

补充说明 #

• 去掉数组包裹后，like的类型和图标值一致，相等判断才能正常触发正确的逻辑分支。
• 函数式更新setCount(prev => ...)可以避免闭包导致的状态不同步问题，确保每次更新都基于当前最新的状态。
• 组件挂载时拉取最新帖子数据，就能保证刷新页面后点赞状态和后端保持一致。

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