인프런 커뮤니티 질문&답변
작성한 질문수
구독,구독취소에 대해 질문이 있어요
작성
·
649
1
안녕하세요 ... 구독, 구독취소 잘 적용이되는데 페이지 새로고침만하면 왜 버튼이 다시 구독전으로 돌아갈까요...
db확인해보니 구독할때마다 계속 구독정보가 저장되더라구요
_id값만 다르게 계속 중복저장돼서 그런가싶기도하고
뭐가 문제인지 모르겟네요 ㅠㅠ
const express = require("express");
const router = express.Router();
const { Subscriber } = require("../models/Subscriber");
//=================================
// Subscriber
//=================================
router.post("/subscriberNumber", (req, res) => {
Subscriber.find({ userTo: req.body.userTo })
.exec((err, subscriber) => {
if (err) return res.status(400).send(err);
return res
.status(200)
.json({ success: true, subscriberNumber: subscriber.length });
});
});
router.post("/subscribed", (req, res) => {
Subscriber.find({ userTo: req.body.userTo, userFrom: req.body.userFrom })
.exec((err, subscriber) => {
if (err) return res.status(400).send(err);
let result = false;
if (subscriber.length !== 0) {
result = true;
}
res.status(200).json({ success: true, subscribed: result });
});
});
router.post("/unSubscribe", (req, res) => {
Subscriber.findOneAndDelete({
userTo: req.body.userTo,
userFrom: req.body.userFrom,
}).exec((err, doc) => {
if (err) return res.status(400).json({ success: false, err });
res.status(200).json({ success: true, doc });
});
});
router.post("/subscribe", (req, res) => {
const subscriber = new Subscriber(req.body);
subscriber.save((err, doc) => {
if (err) return res.status(400).json({ success: false, err });
res.status(200).json({ success: true, doc });
});
});
module.exports = router;
import React, { useEffect, useState } from "react";
import Axios from "axios";
function Subscribe(props) {
const [SubscriberNumber, setSubscriberNumber] = useState(0);
const [Subscribed, setSubscribed] = useState(false);
useEffect(() => {
let variables = { userTo: props.userTo };
Axios.post("/api/subscribe/subscriberNumber", variables).then(
(response) => {
if (response.data.success) {
setSubscriberNumber(response.data.subscriberNumber);
} else {
alert("구독자수를 확인하는데 실패했습니다.");
}
}
);
let subscribedVariables = {
userTo: props.userTo,
userFrom: localStorage.getItem("userId"),
};
Axios.post("/api/subscribe/subscribed", subscribedVariables).then(
(response) => {
if (response.data.success) {
setSubscribed(response.data.subscribed);
} else {
alert("구독했는지 확인하지 못했습니다.");
}
}
);
}, []);
const onSubscribe = () => {
let subscribeVariables = {
userTo: props.userTo,
userFrom: props.userFrom,
};
if (Subscribed) {
Axios.post("/api/subscribe/unSubscribe", subscribeVariables).then(
(response) => {
if (response.data.success) {
setSubscribed(!Subscribed);
setSubscriberNumber(SubscriberNumber - 1);
} else {
alert("구독취소를 실패했습니다.");
}
}
);
} else {
Axios.post("/api/subscribe/subscribe", subscribeVariables).then(
(response) => {
if (response.data.success) {
setSubscribed(!Subscribed);
setSubscriberNumber(SubscriberNumber + 1);
} else {
alert("구독을 실패했습니다.");
}
}
);
}
};
return (
<div
style={{
backgroundColor: `${Subscribed ? "#AAAAAA" : "#CC0000"}`,
borderRadius: "4px",
color: "white",
padding: "10px 16px",
fontWeight: "500",
fontSize: "1rem",
textTransform: "uppercase",
}}
onClick={onSubscribe}
>
{Subscribed ? "Subscribed" : `${SubscriberNumber} Subscribe`}
</div>
);
}
export default Subscribe;
답변 2
1
0
useEffect() 전, 후로 Subscribed state 콘솔로그 찍어보시고 값이 어떤지 확인해 보세요. 저는 처음의 값은 false였는데,
useEffect()하고 나서 undefined 떠서 디비에서 제대로 값을 보내는지 확인해서 해결했습니다.
1.전 VideoDetailPage.js에서 Subscriber 컴포넌트에 props로 _id를 넘길 때 writer의 _id를 넘겨야 하는데 video의 _id를 넘기고 있더라구요. 다음과 같이 수정했습니다.
<div style={{ width: '100%', padding: '3rem 4rem'}}> {VideoDetail.writer && (<div> <video style={{width: '100%', height: '70vh'}} src={`http://localhost:6001/${VideoDetail.filePath}`} controls/> <List.Item actions={[<Subscriber userTo={VideoDetail.writer._id}/>]}> <List.Item.Meta title={VideoDetail.title} description={VideoDetail.description}/> </List.Item> </div>) } </div>