盡管刷新瀏覽器，我怎樣才能使同一用戶不能兩次喜歡照片？

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>)