그룹의 게시글의 댓글 질문합니다 ///////
미해결
React로 NodeBird SNS 만들기
https://www.inflearn.com/questions/33679 전에 답변주신 덕분에 ㅠㅠ ♡.. LOAD_MAIN_POSTS_REQUEST 게시물로드하기 성공했어요~! 그룹에 속한 게시물로 구조를 바꾸어준 후, 댓글 불러오기 LOAD_COMMENTS_REQUEST 에 네트워크탭에 Request URL 에 전과 같은 undefined 오류가 나는 것을 확인했습니다 코드수정 후, 네트워크탭에서 성공의 200표시가 떳습니다.! 그런데 리덕스 데브툴즈에는 LOAD_COMMENTS_FAILURE 가 뜨고 화면에서도 댓글이 보이지않았어요... 타입에러인 것을 확인했습니다, 강의하신 mainPosts의 data구조를 (어느그룹에 속한 게시물인지 데이터를보내기위해) data에 gpostId와 content로 나누어놨었어요 그래서인지 findIndex함수가 작동하지 않는것을 확인하고, 리듀서에서 mainPosts의 배열을 뽑아내기위해 ----> mainPosts.content로 수정했습니다. < post.js / reducers/ front > // 댓글 불러오기 case LOAD_COMMENTS_SUCCESS : { // console . log ( "state.mainPosts.content" , state . mainPosts . content ); const postIndex = state . mainPosts . content . findIndex ( v => v . id === action . data . postId ); // console . log ( "postIndex" , postIndex ); const post = state . mainPosts [ postIndex ]; // console . log ( "post" , post ); const Comments = action . data . comments ; // console . log ( "Comments" , Comments ); const mainPosts = [... state . mainPosts . content ]; // console . log ( "mainPosts" , mainPosts ); mainPosts [ postIndex ] = { ... post , Comments }; // console . log ( "new : " , mainPosts [ postIndex ]); return { ... state , mainPosts , }; } reducer / console.log ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 이렇게 수정해주니 리덕스 데브툴즈에서도 LOAD_COMMENTS_SUCCESS 가 떳고 네트워크탭에서도 GET 방식으로 댓글이 잘 받아와지는 것을 확인할수있었어요.! 그런데 화면에서는 다른화면으로 넘어가서 원하는 결과가 나오지 않아요...ㅠㅠ 오류또한 발견핧수없었습니다. ^ 결론 : 댓글버튼을 클릭하면 dispatch로 LOAD_COMMENTS_REQUEST 가 실행되고 컴포넌트<ContentForm> 에서 { post } 프롭값에 db.Comment 테이블에서 Comments 배열이 불러와졌었는데,, post를 콘솔로 확인해보면 Comments 배열이 불러와지지 않아요,,,, post.Comments로 결과를 화면에 나타나게 했는데 값이 불려와지지 않는게,, 왜그런지 알고싶습니다.ㅠㅠ /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// < post.js / sagas / front > // 댓글 불러오기 function loadCommentsAPI ( postId ) { return axios . get ( `/post/ ${ postId } /comments` ); } function* loadComments ( action ) { try { const result = yield call ( loadCommentsAPI , action . data ); yield put ({ type : LOAD_COMMENTS_SUCCESS , data : { postId : action . data , comments : result . data , }, }); } catch ( e ) { console . error ( e ); yield put ({ type : LOAD_COMMENTS_FAILURE , error : e , }); } } function* watchLoadComments () { yield takeLatest ( LOAD_COMMENTS_REQUEST , loadComments ); } < ContentForm.js / Component / front > const ContentForm = ({ post }) => { const [ commentFormOpened , setCommentFormOpened ] = useState ( false ); const [ commentText , setCommentText ] = useState ( '' ); const { me } = useSelector ( state => state . user ); const { commentAdded , isAddingComment , mainPosts } = useSelector ( state => state . post ); const dispatch = useDispatch (); const liked = me && post . Likers && post . Likers . find ( v => v . id === me . id ); //댓글창토글 const onToggleComment = useCallback (() => { setCommentFormOpened ( prev => ! prev ); if (! commentFormOpened ) { // 댓글창 켤때 불러오기 dispatch ({ type : LOAD_COMMENTS_REQUEST , data : post . id , }); } }, []); // 댓글 const onChangeComment = useCallback (( e ) => { setCommentText ( e . target . value ); }, []); // 댓글올리기 사이클 const onSubmitComment = useCallback (( e ) => { e . preventDefault (); if (! me ){ return alert ( '로그인이 필요합니다.' ); } return dispatch ({ type : ADD_COMMENT_REQUEST , data : { postId : post . id , content : commentText , }, }); }, [ me && me . id , commentText ]); // 댓글 성공시, 빈텍스트로 useEffect (() => { setCommentText ( '' ); },[ commentAdded === true ]); // 댓글삭제하기 const onRemoveComments = useCallback ( userId => () => { alert ( '댓글을 삭제하시겠습니까?' ); if ( me . id === post . User . id ) dispatch ({ type : REMOVE_COMMENT_REQUEST , data : userId , }); }); // 댓글 변수선언 var listIndex ; // 게시글 삭제 const onRemovePost = useCallback ( userId => () => { if ( me . id === post . User . id ) alert ( '게시물을 삭제하시겠습니까?' ); dispatch ({ type : REMOVE_POST_REQUEST , data : userId , }); if ( me . id !== post . User . id ) alert ( '다른 사용자의 게시물은 삭제할 수 없습니다.' ); }); // 좋아요 토글 const onToggleLike = useCallback (() => { if (! me ) { return alert ( '로그인이 필요합니다!' ); } if ( liked ) { // 좋아요 누른 상태 dispatch ({ type : UNLIKE_POST_REQUEST , data : post . id , }); } else { // 좋아요 안 누른 상태 dispatch ({ type : LIKE_POST_REQUEST , data : post . id , }); } }, [ me && me . id , post && post . id , liked ]); return ( <> < div className = "postbox" > < div className = "contBox" > < p > { post . User . nickname } 님의 게시물 - 좋아요 : { post . Likers . length } </ p > < PostImages images = { post . Images } /> < div > { post . content } </ div > </ div > < div className = "btnsbox" > < button type = "button" className = "commentBtn" value = { commentFormOpened } onClick = { onToggleComment } /> { liked ? < button type = "button" className = "likeBtnred" onClick = { onToggleLike } /> : < button type = "button" className = "likeBtnline" onClick = { onToggleLike } /> } < button type = "button" className = "removeBtn" onClick = { onRemovePost ( post . id ) } /> { commentFormOpened === true && < form className = "commentbox" onSubmit = { onSubmitComment } > < textarea className = "comment" value = { commentText } onChange = { onChangeComment } /> < button type = "primary" htmltype = "submit" className = "combtn" loading = { isAddingComment } > COMMENT </ button > </ form > } { /* 댓글올라갈부분 */ } { commentFormOpened === true && ( < div style = { { display : "inline-block" , width : "100%" } } > < p style = { { marginLeft : "10px" } } > { commentAdded ? '댓글' + post . Comments . length : '댓글' + '0' } </ p > < div className = "comline" ></ div > { console . log ( "mainPosts.content???: " , mainPosts . content , "post???: " , post ) } { (() => { if ( post . Comments ){ listIndex = post . Comments . map (( el ) => ( < li style = { { listStyle : "none" , display : "inline-block" , clear : "both" } } > { console . log ( "el" , el ) } { el . User . nickname } : { el . content } { el . UserId === me . id ? < button type = "button" className = "remove" onClick = { onRemoveComments ( post . id ) } > REMOVE </ button > : "" } </ li > ) ) } return ( < ul > { listIndex } </ ul > ); })() } </ div > ) } </ div > </ div > </> ); }; ContentForm . propTypes ={ post : PropTypes . shape ({ User : PropTypes . object , content : PropTypes . string , createdAt : PropTypes . string , }), }; export default ContentForm ; < post.js / routes / back > // 댓글불러오기 router . get ( '/:id/comments' , async ( req , res , next ) => { try { const post = await db . Post . findOne ({ where : { id : req . params . id } }); if (! post ) { return res . status ( 404 ). send ( '포스트가 존재하지 않습니다........' ); } const comments = await db . Comment . findAll ({ where : { PostId : req . params . id , }, order : [[ 'createdAt' , 'ASC' ]], include : [{ model : db . User , attributes : [ 'id' , 'nickname' ], }], }); res . json ( comments ); } catch ( e ) { console . error ( e ); next ( e ); } });
- react
- javascript