팔로워,팔로잉 더보기 버튼시 3명씩 더불러오기가 수행되지 않습니다... - 인프런

팔로워,팔로잉 더보기 버튼시 limit은 증가하지만 3명씩 더불러오기가 수행되지 않습니다.

profile.js

import React, {useEffect, useState, useCallback} from 'react';
import Head from "next/head";
import {useSelector} from "react-redux";
import Router from 'next/router';
import axios from "axios";
import {END} from "redux-saga";
import useSWR from 'swr';

import AppLayout from "../componets/AppLayout";
import FollowList from "../componets/FollowList";
import NicknameEditForm from "../componets/NicknameEditForm";
import { LOAD_MY_INFO_REQUEST} from "../reducers/user";
import wrapper from "../store/configureStore";

const fetcher = (url) => axios.get(url, {withCredentials:true}).then((result) => result.data); //swr

const Profile = () => {
  const {me} = useSelector((state) => state.user);
  const [followersLimit,setFollowersLimit] = useState(3);
  const [followingsLimit,setFollowingsLimit] = useState(3);

  const { data : followersData, error : followerError } = useSWR(`http://localhost:3065/user/followers?limit=${followersLimit}`,fetcher);
  const { data : followingsData, error : followingError } = useSWR(`http://localhost:3065/user/followings?limit=${followingsLimit}`,fetcher);

  useEffect(() => {
    if (!(me && me.id)) {
      alert("로그인이 필요합니다.");
      Router.push('/');
    }
  }, [me && me.id]);

  const loadMoreFollowings = useCallback(() => {
    setFollowingsLimit((prev) => prev +3);
  });
  const loadMoreFollowers = useCallback(() => {
    setFollowersLimit((prev) => prev +3);
  });

  if (!me) {
    return null;
  }

  if(followerError || followingError){
    console.error(followerError || followingError);
    return <div>팔로잉/팔로워 로딩 중 에러가 발생합니다.</div>
  }

  return (
    <>
      <Head>
        <meta charSet="utf-8"/>
        <title>내 프로필 | Node bird</title>
      </Head>
      <AppLayout>
        <NicknameEditForm/>
        <FollowList header="팔로잉 목록" data={followingsData} onClickMore={loadMoreFollowings} loading = {!followingsData && !followingError}/>
        <FollowList header="팔로워 목록" data={followersData} onClickMore={loadMoreFollowers} loading = {!followersData && !followerError} />
      </AppLayout>
    </>
  )
}
export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
  const cookie = context.req ? context.req.headers.cookie : '';
  axios.defaults.headers.Cookie = '';
  //서버에서 실행될때는 쿠키 공유 문제가 생김
  if(context.req && cookie){
    axios.defaults.headers.Cookie = cookie;
  }
  context.store.dispatch({
    type : LOAD_MY_INFO_REQUEST,
  })
  context.store.dispatch(END);                // request후 sucess가 될때까지 기다린후
  await context.store.sagaTask.toPromise();   // 렌더링 끝내기
});

export default Profile;

Followlist.js

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 {REMOVE_FOLLOWER_REQUEST, UNFOLLOW_REQUEST} from "../reducers/user";


const FollowList = ({header, data, onClickMore,loading}) =>{
  const dispatch = useDispatch();
  const onCancel = (id) => () =>{
    if(header === '팔로잉'){
    dispatch({
      type : UNFOLLOW_REQUEST,
      data : id,
    });
    }
    else {
      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 onClick = {onClickMore} loading = {loading}>더 보기</Button>
      </div>
      }
      bordered
      dataSource ={data}
      renderItem = {(item) => (
        <List.Item style ={{marginTop: 20}}>
          <Card actions ={[<StopOutlined key = "stop" onClick = {onCancel(item.id)}/> ]}>
            <Card.Meta description = {item.nickname}/>
          </Card>
        </List.Item>
      )}
      />
  )
};

FollowList.propTypes = {
  header : PropTypes.string.isRequired,
  data : PropTypes.array.isRequired,
  onClickMore : PropTypes.func.isRequired,
  loading : PropTypes.bool.isRequired,
};

export default FollowList

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

팔로워,팔로잉 더보기 버튼시 3명씩 더불러오기가 수행되지 않습니다.