강의

N
챌린지

멘토링

N
클립

커뮤니티

인프런 커뮤니티 질문&답변

송지훈님의 프로필 이미지
송지훈

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

팔로우 / 언팔로우

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

작성

·

298

0

발생하는 상황때문에 질문 드려요.

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;

지금 해결해보려고 몇시간 째 계속 시도중이긴한데

감이 안잡히네요 ㅠㅠ 

백엔드 껏다 켜보면

지워져있긴하는데 버튼 누르면 무한 리퀘스트가 발생해요.

강의는 감사히 보고있습니다.!!

expressreactnodejsreduxNext.js

답변 10

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

0

송지훈님의 프로필 이미지
송지훈
질문자

저의 실수로 인해 귀찮게 한 거 같아서 죄송합니다. 또 감사합니다.!

좋은 하루 보내세요.

0

송지훈님의 프로필 이미지
송지훈
질문자

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

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

0

송지훈님의 프로필 이미지
송지훈
질문자

아.. 제가 액션 정의에 값을 다 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,
  //   });
// }
  // };

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

혹시 saga에서 REMOVE_FOLLOWER_FAILURE 대신 REMOVE_FOLLOWER_REUQEST 넣으신 거 아닌가요? 에러날때 다시 REQUEST 액션이 호출되네요.

콘솔 보니까 error메시지가 있는데 type이 REQUEST이네요.

0

송지훈님의 프로필 이미지
송지훈
질문자

이렇게 나오긴 하는데 

UserId는 backend에서 받아온 데이터일텐대 

왜계속 remove_follower_request가 되는지

상황이 잘 이해가 안가네요

죄송합니당.

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

0

송지훈님의 프로필 이미지
송지훈
질문자

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}</div>}
      loadMore={
        <div style={{ textAlign: 'center', margin: '10px 0' }}>
          <Button>더 보기</Button>
        </div>
      }
      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} />
          </Card>
        </List.Item>
      )}
    />
  );
};

FollowList.propTypes = {
  header: PropTypes.string.isRequired,
  data: PropTypes.array.isRequired,
};

export default FollowList;
useEffect에는 안 넣고
일단 강의 코드 그대로 해봣다가 안대서
? : 로 바꾼게 다입니당.
제가 뭔가를 잘못한게 분명한데 쉽지 않네요 잘못한거 찾는게요.
송지훈님의 프로필 이미지
송지훈

작성한 질문수

전체 Q&A
질문하기