如何确保点赞计数器状态按用户ID独立增减？

问题描述 #

我正在开发一个模仿Instagram点赞系统的练习Web应用。当前代码实现了点赞增减功能，但状态是全局共享的：点击用户A的照片点赞正常，之后点击用户B的照片不会点赞反而取消，点击用户C的照片又会点赞，以此类推。点赞状态在所有用户间共享，不符合需求，希望实现Instagram式的独立点赞/取消功能，不清楚问题出在哪里。

问题根源分析 #

• 全局状态复用：Gallery.js里的isLikedClicked、currentUserClicks是全局状态，所有Grid组件共用这一套状态，导致点击任意卡片都会改变全局状态，进而干扰其他卡片的判断逻辑。
• Grid组件状态混乱：Grid同时依赖父组件的全局状态和自身局部状态，且点击事件把setState作为参数传递给父组件，逻辑完全错误。
• 后端逻辑错误：后端通过UserID更新所有该用户的照片点赞数，而不是单张照片，导致同一用户的所有照片点赞数同步变化。

解决方案 #

前端修改 #

重构Gallery.js：每张照片维护独立状态

把全局状态改成对象，存储每张照片的点赞状态和点赞数，确保每张卡片的状态独立：

import { useState, useEffect } from 'react';
import axios from 'axios';
import Grid from './Grid';

const Gallery = ({ gridData, authToken }) => {
    // 存储每张照片的点赞状态：key=照片ID，value=是否已点赞
    const [likedPhotos, setLikedPhotos] = useState({});
    // 存储每张照片的最新点赞数：key=照片ID
    const [photoLikes, setPhotoLikes] = useState({});

    // 初始化点赞数
    useEffect(() => {
        const initialLikes = {};
        gridData.forEach(photo => {
            initialLikes[photo.id] = photo.likes; // 确保照片有唯一id字段，没有的话用UserID+url组合
        });
        setPhotoLikes(initialLikes);
    }, [gridData]);

    const handleLikeToggle = (photoId, userId) => {
        const isLiked = likedPhotos[photoId] || false;
        const url = isLiked ? 'http://127.0.0.1:8000/api/dislike' : 'http://127.0.0.1:8000/api/like';

        axios.post(url, { UserID: userId, photoId }, {
            headers: {
                "Accept": 'application/json',
                "Authorization": `Bearer ${authToken}`
            }
        })
        .then(resp => {
            // 更新对应照片的点赞数和状态
            setPhotoLikes(prev => ({
                ...prev,
                [photoId]: resp.data.userLikes
            }));
            setLikedPhotos(prev => ({
                ...prev,
                [photoId]: !isLiked
            }));
        })
        .catch(err => {
            console.log(err);
        });
    };

    return (
        <div className="main">
            <ul className="cards">
                {gridData.map((photo) => (
                    <Grid
                        key={photo.id} // 必须添加唯一key，避免React渲染异常
                        likes={photoLikes[photo.id] || photo.likes}
                        src={photo.url}
                        isLiked={likedPhotos[photo.id] || false}
                        onClick={() => handleLikeToggle(photo.id, photo.UserID)}
                    />
                ))}
            </ul>
        </div>
    );
};

export default Gallery;

重构Grid.js：简化组件逻辑

移除自身维护的状态，完全依赖父组件传递的实时数据，保证状态一致性：

const Grid = ({ likes, src, isLiked, onClick }) => {
    return (
        <li className="cards_item">
            <div>
                <div className="card_image">
                    {/* 可以根据isLiked添加样式，比如红色爱心 */}
                    <img 
                        src={src} 
                        alt="Photo" 
                        className={`gallery-img ${isLiked ? 'liked' : ''}`} 
                        onClick={onClick}
                    />
                </div>
                <h5 className="likes">Likes: {likes}</h5>
            </div>
        </li>
    );
};

export default Grid;

后端修改：按照片ID更新点赞数 #

原来的后端通过UserID更新所有照片，改成按照片ID更新单张照片的点赞数：

public function handleLike(Request $request)
{
    try {
        $photoId = $request->get('photoId'); // 接收照片ID参数
        // 按照片ID更新点赞数
        Uploads::where(['id' => $photoId])->update(['likes' => DB::raw('likes + 1')]);
        $photo = Uploads::find($photoId);

        return [
            'photoId' => $photoId,
            'userLikes' => $photo->likes,
        ];
    } catch (\Exception $e) {
        Log::error($e->getMessage());
        throw new \Exception($e->getMessage(), $e->getCode(), $e);
    }
}

public function handleDislike(Request $request)
{
    try {
        $photoId = $request->get('photoId');
        Uploads::where(['id' => $photoId])->update(['likes' => DB::raw('likes - 1')]);
        $photo = Uploads::find($photoId);

        return [
            'photoId' => $photoId,
            'userLikes' => $photo->likes
        ];
    } catch (\Exception $e) {
        Log::error($e->getMessage());
        throw new \Exception($e->getMessage(), $e->getCode(), $e);
    }
}

关键修复点总结 #

1. 用对象存储每张照片的独立点赞状态，彻底解决全局状态共享问题。
2. Grid组件改为纯展示组件，状态完全由父组件管理，避免状态不一致。
3. 后端修正点赞更新逻辑，确保只修改单张照片的点赞数。
4. 给列表项添加唯一key，符合React渲染规范。

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