Cộng đồng Hỏi & Đáp của Inflearn

bis9203091326

câu hỏi đã được viết

Chuỗi bài học về Node và React để học bằng cách theo dõi - Tạo một trang YouTube

Tính năng đăng ký (2)

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

Viết

687

안녕하세요 ... 구독, 구독취소 잘 적용이되는데 페이지 새로고침만하면 왜 버튼이 다시 구독전으로 돌아갈까요...

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;

mongodbreactnodejsredux

Câu trả lời 2

beginagain

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

official

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>

official

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

siwoo1620

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

bis9203091326

câu hỏi đã được viết

Đặt câu hỏi