-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
팔로워,팔로잉 더보기 버튼시 3명씩 더불러오기가 수행되지 않습니다.
20.08.11 14:20 작성 조회수 187
0
팔로워,팔로잉 더보기 버튼시 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
답변을 작성해보세요.
1
0
0
조현영
지식공유자2020.08.11
개발자도구 네트워크 탭에서
http://localhost:3065/user/followers?limit=3
http://localhost:3065/user/followers?limit=6
http://localhost:3065/user/followers?limit=9
이렇게 숫자가 올라가면서 요청이 보내지는지 확인해보세요.
그리고 그 요청을 클릭하면 preview나 response 탭이 있는데 거기서 limit 개수만큼 응답이 오는지 확인해보세요.
답변 3