• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

구독,구독취소에 대해 질문이 있어요

21.01.28 21:34 작성 조회수 464

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;
course-thumbnail

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

구독 기능 (2)

강의실 바로가기

답변 2

·

답변을 작성해보세요.

1

beginagain님의 프로필

beginagain

2021.12.05

안녕하세요 저도 같은 문제인데 혹시 해결하셨을까요

초보님의 프로필

초보

2021.12.07

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>
초보님의 프로필

초보

2021.12.07

2. 혹은 useEffect에서 depth array에 props를 넣어보세요

0

시우쿤님의 프로필

시우쿤

2021.06.19

useEffect() 전, 후로 Subscribed state 콘솔로그 찍어보시고 값이 어떤지 확인해 보세요. 저는 처음의 값은 false였는데,
useEffect()하고 나서 undefined 떠서 디비에서 제대로 값을 보내는지 확인해서 해결했습니다.

이 글과 비슷한 Q&A