안녕하세요. remove_follower_request가 무한으로

Question

발생하는 상황때문에 질문 드려요. User`.`id` = 'undefined'; DELETE /user/follower/undefined 403 3.902 ms - 24 Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 1; Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 'undefined'; DELETE /user/follower/undefined 403 3.775 ms - 24 Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 1; Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 'undefined'; DELETE /user/follower/undefined 403 4.127 ms - 24 Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 1; Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 'undefined'; DELETE /user/follower/undefined 403 4.112 ms - 24 Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 1; Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 'undefined'; DELETE /user/follower/undefined 403 3.943 ms - 24 Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 1; Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 'undefined'; DELETE /user/follower/undefined 403 4.019 ms - 24 Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 1; Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 'undefined'; DELETE /user/follower/undefined 403 3.774 ms - 24 Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 1; Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 'undefined'; DELETE /user/follower/undefined 403 4.700 ms - 24 Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 1; Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 'undefined'; DELETE /user/follower/undefined 403 5.367 ms - 24 Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 1; Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 'undefined'; DELETE /user/follower/undefined 403 9.147 ms - 24 Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 1; 지금 해결해보려고 몇시간 째 계속 시도중이긴한데 감이 안잡히네요 ㅠㅠ  백엔드 껏다 켜보면 지워져있긴하는데 버튼 누르면 무한 리퀘스트가 발생해요. 강의는 감사히 보고있습니다.!!

제로초(조현영) · Answer

만약 제가 강의에 return을 안 붙였다면 제 실수입니다.

제로초(조현영) · Answer

remove_follower 액션을 dispatch하는 코드를 혹시 useEffect같은 곳에 넣으셨나요? 그래서 useEffect가 계속 실행돼서 그렇지는 않은지 살펴보세요.

송지훈 · Answer

저의 실수로 인해 귀찮게 한 거 같아서 죄송합니다. 또 감사합니다.! 좋은 하루 보내세요.

송지훈 · Answer

/ const onCancel = (id) => () => {    //   if (header === '팔로잉') {    //     dispatch({    //       type: UNFOLLOW_REQUEST,    //       data: id,    //     });    //   }    //   dispatch({    //     type: REMOVE_FOLLOWER_REQUEST,    //     data: id,    //   });    // }; 제가 본데까지는 강의에서는 return을 안 붙엿는데, return을 붙여야하겟죠?? 정말 감사해요ㅎㅎ

제로초(조현영) · Answer

자바스크립트 함수는 무조건 return을 해야만 아랫줄 실행이 멈춥니다. return 붙여주셔야 합니다.

송지훈 · Answer

아.. 제가 액션 정의에 값을 다 request로 햇습니다. 정말 민망한 상황이네요 죄송합니다!! 마지막으로   // const onCancel = (id) => () => {    //   if (header === '팔로잉') {    //     dispatch({    //       type: UNFOLLOW_REQUEST,    //       data: id,    //     });    //   }    //   dispatch({    //     type: REMOVE_FOLLOWER_REQUEST,    //     data: id,    //   });    // }; 여기서 header가 팔로잉인 상황일때 자동으로 if안의 dispatch만 리턴 되고 아래의 REMOVE_FOLLOWER_REQUEST 는 실행이 안되기때문에 else 안 써도 되는건가요?? 아래처럼 안쓰면 if상황일때도 아래도 같이 실행되는데 dispatch가 호출되면 return이 되는지 궁금해서 여쭤봤습니다.   // const onCancel = (id) => () => {    //   if (header === '팔로잉') {    //     dispatch({    //       type: UNFOLLOW_REQUEST,    //       data: id,    //     });    //   } else {    //   dispatch({    //     type: REMOVE_FOLLOWER_REQUEST,    //     data: id,    //   }); // }    // };

제로초(조현영) · Answer

혹시 saga에서 REMOVE_FOLLOWER_FAILURE 대신 REMOVE_FOLLOWER_REUQEST 넣으신 거 아닌가요? 에러날때 다시 REQUEST 액션이 호출되네요. 콘솔 보니까 error메시지가 있는데 type이 REQUEST이네요.

송지훈 · Answer

이렇게 나오긴 하는데  UserId는 backend에서 받아온 데이터일텐대  왜계속 remove_follower_request가 되는지 상황이 잘 이해가 안가네요 죄송합니당.

제로초(조현영) · Answer

하나 의심되는 점은 DELETE /user/follower/undefined가 뜨는데 사용자 아이디가 undefined네요? saga쪽에서 action 한 번 로그 찍어보시는 게 좋을 것 같습니다.

송지훈 · Answer

import React from ' react ' ; import PropTypes from ' prop-types ' ; import { List, Button, Card } from ' antd ' ; import { StopOutlined } from ' @ant-design/icons ' ; import { useDispatch } from ' react-redux ' ; import { UNFOLLOW_REQUEST, REMOVE_FOLLOWER_REQUEST } from ' ../reducers/user ' ; const FollowList = ({ header , data }) => { const dispatch = useDispatch (); // const onCancel = (id) => () => { // if (header === '팔로잉') { // dispatch({ // type: UNFOLLOW_REQUEST, // data: id, // }); // } // dispatch({ // type: REMOVE_FOLLOWER_REQUEST, // data: id, // }); // }; const onUnFollow = ( id ) => () => { dispatch ({ type : UNFOLLOW_REQUEST , data : id , }); }; const onRemoveFollower = ( id ) => () => { dispatch ({ type : REMOVE_FOLLOWER_REQUEST , data : id , }); }; return ( < List style ={ { marginBottom : 20 } } grid ={ { gutter : 4 , xs : 2 , md : 3 } } size = " small " header ={ < div > { header } } loadMore ={ < div style ={ { textAlign : ' center ' , margin : ' 10px 0 ' } } > < Button >더 보기 } bordered dataSource ={ data } renderItem ={ ( item ) => ( < List.Item style ={ { marginTop : 20 } } > < Card actions ={ [ < StopOutlined key = " stop " onClick ={ header === ' 팔로잉 ' ? onUnFollow ( item .id) : onRemoveFollower ( item .id) } />, ] } > < Card.Meta description ={ item .nickname } /> ) } /> ); }; FollowList .propTypes = { header : PropTypes. string .isRequired, data : PropTypes. array .isRequired, }; export default FollowList ; useEffect에는 안 넣고 일단 강의 코드 그대로 해봣다가 안대서 ? : 로 바꾼게 다입니당. 제가 뭔가를 잘못한게 분명한데 쉽지 않네요 잘못한거 찾는게요.