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

Question

안녕하세요 ... 구독, 구독취소 잘 적용이되는데 페이지 새로고침만하면 왜 버튼이 다시 구독전으로 돌아갈까요... 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 ` } ) ; } export default Subscribe ;

beginagain · Answer

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

시우쿤 · Answer

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