我有一个练习网络应用程序，我正在努力模仿Instagram的类似系统。
在我下面的代码中，递增/递减是有效的，它是以全局方式递增/递减的。
换句话说，如果我点击用户A的照片来增加其喜欢的数量，这是正常的。
之后，如果我点击用户B的照片，它不会增加，而是减少。
然后，如果我单击用户C的照片，它会递增
等等....
似乎所有用户都共享了赞状态，这是不正确的
我希望喜欢/不喜欢的系统能跟Instagram的一样，但似乎不能完全确定下来。下面是实现这一切的所有代码。不知道我做错了什么。
Gallery.js：

const [isLikedClicked, setIsLikeClicked]                      = useState(false);
const [isDislikeClicked, setIsDislikeClicked]                 = useState(false);
const [userLikes, setUserLikes]                               = useState(null);
const [currentUserClicks, setCurrentUserClicks]               = useState(null);

const handleLikesBasedOnUserId = (likedPhotoUserId) => {
    if(currentUserClicks >= 1) {
        setCurrentUserClicks(currentUserClicks - 1);
        setIsDislikeClicked(true);
        handleDislike(likedPhotoUserId);
    } else {
        setCurrentUserClicks(currentUserClicks + 1);
        setIsLikeClicked(true);
        handleLike(likedPhotoUserId);
    }

};

const handleLike = (likedPhotoUserId) => {
    const url = 'http://127.0.0.1:8000/api/like';

    const headers = {
        "Accept": 'application/json',
        "Authorization": `Bearer ${authToken}`
    };

    let data = {
        'UserID': likedPhotoUserId
    };

    axios.post(url, data, {headers})
        .then(resp => {
            setUserLikes(resp.data.userLikes);
        }).catch(err => {
        console.log(err);
    });

};

const handleDislike = (likedPhotoUserId) => {
    const url = 'http://127.0.0.1:8000/api/dislike';

    const headers = {
        "Accept": 'application/json',
        "Authorization": `Bearer ${authToken}`
    };

    let data = {
        'UserID': likedPhotoUserId
    };

    axios.post(url, data, {headers})
        .then(resp => {
            setUserLikes(resp.data.userLikes);
        }).catch(err => {
        console.log(err);
    });

};

return (
    <>
        <div className="main">
            <ul className="cards">
                {
                    gridData.map((photos) => {
                        return <Grid
                            likes={photos.likes}
                            src={photos.url}
                            currentUserClicks={currentUserClicks}
                            onClick={handleLikesBasedOnUserId}
                            isLikedClicked={isLikedClicked}
                            userId={photos.UserID}
                        />
                    })
                }
            </ul>
        </div>
    </>
);

Grid.js：

const [likes, setLikes] = useState(props.likes);
const [likeValue, setLikeValue] = useState(null);

return (
    <>
        <li className="cards_item">
            <div>
                <div className="card_image">
                    <img src={props.src} alt="Photo" className="gallery-img" onClick={() => props.onClick(props.userId, props.isLikedClicked ? setLikeValue(props.user) : setLikes(props.likes + 1))}/>
                </div>
                <span style={{display: 'none'}}>{props.currentUserClicks}</span>
                <h5 className="likes">Likes: {likes}</h5>
            </div>
        </li>
    </>
);

后端控制器操作：

public function handleLike(Request $request)
{
    try {
        $userId                                  = $request->get('UserID');
        Uploads::where(['UserID' => $userId])->update(['likes' => DB::raw('likes + 1')]);
        $getUserLikes                            = $this->__usersRepository->getUserLikes($userId);
        $userLikes                               = $getUserLikes[0]->likes;

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

}

public function handleDislike(Request $request)
{
    try {
        $userId                                  = $request->get('UserID');
        Uploads::where(['UserID' => $userId])->update(['likes' => DB::raw('likes - 1')]);
        $getUserLikes                            = $this->__usersRepository->getUserLikes($userId);
        $userLikes                               = $getUserLikes[0]->likes;

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

}