尽管刷新浏览器，我怎样才能使同一用户不能两次喜欢照片？

Question

我想弄清楚如何模拟 IG 上存在的相同系统。 例如：如果当前登录的用户喜欢一张照片，然后再次尝试喜欢，那么它应该不喜欢 - 反之亦然。 用户刷新页面、注销或清除浏览器缓存都无关紧要，因为喜欢的数据来自服务器。

从服务器获取的useEffect()的响应如下所示：

{
  "url": "someUrl.com",
  "likes": 161,
  "UserID": "u-79696bbe-18e5-4e73-bfb7-e8c80b89e0a6",
  "name": "Paul",
  "photo_id": "p-a2bbb777-67de-4196-a92f-1effba006d13",
  "is_liked": 1,
  "user_id": "u-e6216642-5a01-4e69-913c-b2d19ef9b22e"
}

• 如果不喜欢照片， is_liked为 0，如果喜欢，则为 1
• UserID是被点赞照片的用户id
• user_id是喜欢照片的任何登录用户（我知道这很混乱，但我稍后会更改名称）
• photo_id是被点赞的照片的id

从服务器获取的handleLike()的响应如下所示。 它增加了照片的喜欢总数 ( userLikes ) 并将is_liked切换为 1

{
  "UserID": "u-79696bbe-18e5-4e73-bfb7-e8c80b89e0a6",
  "loggedInUserId": "u-43eaf8a2-2f47-4112-88f1-e08a382df59d",
  "likedPhotoId": "p-a2bbb777-67de-4196-a92f-1effba006d13",
  "userLikes": 163,
  "is_liked": 1
}

handleDislike()相反：

{
    "UserID": "u-79696bbe-18e5-4e73-bfb7-e8c80b89e0a6",
    "loggedInUserId": "u-43eaf8a2-2f47-4112-88f1-e08a382df59d",
    "dislikedPhotoId": "p-a2bbb777-67de-4196-a92f-1effba006d13",
    "userLikes": 162,
    "is_liked": 0
}

总之，我怎样才能使 like 系统与 Instagram 的相同？ 端点正在返回正确的数据，但在前端实现是我完全卡住的地方

这是代码：

const Grid = () => {
    let authToken                                                 = localStorage.getItem('token');

    const [gridData, setGridData]                                 = useState([]);
    const [userLikedPhotos, setUserLikedPhotos]                   = useState({});

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

        axios.get('http://127.0.0.1:8000/api/get-user-uploads-data', {headers})
            .then(resp => {
                console.log(resp.data);
                setGridData(resp.data);
            }).catch(err => {
            console.log(err);
        });

    }, []);

    const handleLikesBasedOnUserId = (likedPhotoUserId, userName, likedPhotoId, is_liked, user_id) => {
        if(userLikedPhotos[likedPhotoUserId]) {
            // dislike
            delete userLikedPhotos[likedPhotoUserId];
            gridData.find(photo => photo.UserID === likedPhotoUserId && photo.UserID !== user_id).likes--;
            handleDislike(likedPhotoUserId, userName, likedPhotoId);
        } else {
            // like
            userLikedPhotos[likedPhotoUserId] = true;
            gridData.find(photo => photo.UserID === likedPhotoUserId && photo.UserID !== user_id).likes++;
            handleLike(likedPhotoUserId, userName, likedPhotoId);
        }

        setUserLikedPhotos({...userLikedPhotos});
    };

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

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

        let data = {
            'UserID': likedPhotoUserId,
            'userName' : userName,
            'likedPhotoId' : likedPhotoId
        };

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

    };

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

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

        let data = {
            'UserID': likedPhotoUserId,
            'userName' : userName,
            'dislikedPhotoId' : likedPhotoId
        };

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

    };

    return (
        <>
            <section className="gallery">
                <div className="container">
                    <div className="img-container">
                        {
                            gridData.map((photos, index) => {
                                return (
                                    <>
                                        <div className="userDetails">
                                            <span className="likesAmt">❤️ {photos.likes}</span>
                                            <Button variant="success" onClick={() => handleLikesBasedOnUserId(photos.UserID, photos.name, photos.photo_id, photos.is_liked, photos.user_id)}>Like</Button>
                                        </div>
                                    </>
                                )
                            })
                        }
                    </div>
                </div>
            </section>
        </>
    )
}

export default Grid;

Answer 1

我认为您应该使用从服务器获取的一些值设置 userLikedPhotos 状态 useEffect 并像这样调整您的按钮：

(userLikedPhotos?["is_liked"] ?
<Button>Dislike</Button>:
<Button>Like</Button>)