React点赞/取消点赞按钮状态切换后重置问题求助

问题根源 #

组件重新挂载时，liked状态会被初始化为false，而你的useEffect只获取了点赞总数，没有判断当前用户是否已经点赞过该帖子，导致切回页面后状态直接重置。另外handleLike和handleUnlike里的setLiked逻辑也有误，没有正确更新状态。

修复步骤 #

1. 在useEffect中同步用户的点赞状态 #

修改useEffect，获取点赞列表后，检查当前用户是否在点赞记录中，同步更新liked状态：

const [postLikes, setPostLikes] = useState([]); // 这里改成数组，因为你用到了postLikes.length
const [liked, setLiked] = useState(false);
const params = useParams();
// 假设你通过hooks获取当前登录用户，能拿到user.id或唯一标识
const user = useAuth(); 

useEffect(() => {
    fetch(`/posts/${post.id}/likes`)
    .then(resp => resp.json())
    .then(data => {
        setPostLikes(data);
        // 根据后端返回的点赞数据结构，判断当前用户是否点赞过
        const hasLiked = data.some(like => like.user_id === user.id);
        setLiked(hasLiked);
    })
}, [post.id, user.id]) // 依赖项加上user.id，用户切换时重新检查状态

2. 修正handleLike和handleUnlike的状态更新逻辑 #

当前代码里setLiked(postLikes)完全错误，应该根据操作结果更新liked状态，同时同步更新点赞列表：

const handleLike = () => {
    fetch(`/posts/${post.id}/likes`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
    })
    .then(resp => resp.json())
    .then(newLike => {
        // 添加新点赞到列表
        setPostLikes(prev => [...prev, newLike]);
        setLiked(true); // 点赞成功后设为true
    })
    .catch(error => {
        setErrors(error)
    })
}

const handleUnlike = () => {
    // 先找到当前用户的点赞记录
    const userLike = postLikes.find(like => like.user_id === user.id);
    fetch(`/posts/${post.id}/likes/${userLike.id}`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
        },
    })
    .then(() => {
        // 从列表中移除当前用户的点赞
        setPostLikes(prev => prev.filter(like => like.id !== userLike.id));
        setLiked(false); // 取消点赞后设为false
    })
    .catch(error => {
        setErrors(error)
    })
}

3. 修正postLikes的初始状态 #

你的JSX里用了postLikes.length，所以初始状态必须是数组，否则第一次渲染会报错：

const [postLikes, setPostLikes] = useState([]);

额外注意点 #

• 确保后端返回的点赞数据包含用户标识（比如user_id），这样才能准确判断当前用户的点赞状态。
• 如果后端支持DELETE /posts/:post_id/likes（自动根据当前用户删除对应点赞），可以简化handleUnlike的API路径，不用手动传点赞ID。

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