-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
해쉬태그가 불러와지지 않고 있습니다.
21.10.25 20:51 작성 조회수 174
0
보시면 주소창에는 익스프레스 해시태그를 선택한 상태인데 화면에 출력은 변화하지 않고 있습니다.
리덕스에서는 정상적으로 선택된것 같은데 해당 해시태그로 이동하지 않고 있는것 같습니다.
그런데 또 해당 해시태그 주소에서 새로고침을 하면 위에 스샷 화면에서 해당 해쉬태그만 있는 게시물만 정상적으로 출력됩니다. 도대체 어디가 문제인지 갈피를 못잡고 있습니다.
hashtag/[tag].js
import React, { useEffect } from "react";
import axios from "axios";
import { useRouter } from "next/router";
import { END } from 'redux-saga';
import { useDispatch, useSelector } from "react-redux";
import AppLayout from "../../components/AppLayout";
import wrapper from "../../store/configureStore";
import PostCard from "../../components/PostCard";
import { LOAD_HASHTAG_POSTS_REQUEST } from "../../reducers/post";
import { LOAD_MY_INFO_REQUEST } from "../../reducers/user";
const Hashtag = () => {
const dispatch = useDispatch();
const router = useRouter();
const { tag } = router.query;
const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector((state) => state.post);
useEffect(() => {
function onScroll() {
if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
if (hasMorePosts && !loadPostsLoading) {
dispatch({
type: LOAD_HASHTAG_POSTS_REQUEST,
lastId: mainPosts[mainPosts.length - 1] && mainPosts[mainPosts.length - 1].id,
data: tag,
})
}
}
}
window.addEventListener('scroll', onScroll);
return () => {
window.removeEventListener('scroll', onScroll);
}
}, [hasMorePosts, loadPostsLoading, mainPosts.length, tag])
return (
<AppLayout>
{mainPosts.map((c) => (
<PostCard key={c.id} post={c} />
))}
</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({
type: LOAD_HASHTAG_POSTS_REQUEST,
data: context.params.tag,
})
context.store.dispatch(END);
await context.store.sagaTask.toPromise();
})
export default Hashtag;
reducers/post.js
case LOAD_USER_POSTS_REQUEST:
case LOAD_HASHTAG_POSTS_REQUEST:
case LOAD_POSTS_REQUEST:
draft.loadPostsLoading = true;
draft.loadPostsDone = false;
draft.loadPostsError = null;
break;
case LOAD_USER_POSTS_SUCCESS:
case LOAD_HASHTAG_POSTS_SUCCESS:
case LOAD_POSTS_SUCCESS:
draft.loadPostsLoading = false;
draft.loadPostsDone = true;
draft.mainPosts = draft.mainPosts.concat(action.data);
draft.hasMorePosts = action.data.length === 10;
break;
case LOAD_USER_POSTS_FAILURE:
case LOAD_HASHTAG_POSTS_FAILURE:
case LOAD_POSTS_FAILURE:
draft.loadPostsLoading = false;
draft.loadPostsError = action.error;
break;
sagas/post.js
function loadHashtagPostsAPI(data, lastId) {
return axios.get(`/hashtag/${encodeURIComponent(data)}?lastId=${lastId || 0}`);
}
function* loadHashtagPosts(action) {
try {
const result = yield call(loadHashtagPostsAPI, action.data, action.lastId)
yield put({
type: LOAD_HASHTAG_POSTS_SUCCESS,
data: result.data,
})
} catch (err) {
console.error(err)
yield put({
type: LOAD_HASHTAG_POSTS_FAILURE,
error: err.response.data,
})
}
}
routes/hashtag.js
const express = require('express');
const { Hashtag, Post, Image, Comment, User } = require('../models');
const { Op } = require('sequelize');
const router = express.Router();
router.get('/:hashtag', async (req, res, next) => { // GET /hashtag/노드
try {
const where = {};
if (parseInt(req.query.lastId, 10)) { // 초기 로딩이 아닐때
where.id = {[Op.lt]: parseInt(req.query.lastId, 10)}
}
const posts = await Post.findAll({
where,
limit: 10,
order: [['createdAt', 'DESC']],
include: [{
model: Hashtag,
where: { name: decodeURIComponent(req.params.hashtag) },
}, {
model: User,
attributes: ['id', 'nickname'],
}, {
model: Image,
}, {
model: Comment,
include: [{
model: User,
attributes: ['id', 'nickname'],
order: [['createdAt', 'DESC']],
}],
}, {
model: User, // 좋아요 누른사람
as: 'Likers',
attiributes: ['id'],
}, {
model: Post,
as: 'Retweet',
include: [{
model: User,
attiributes: ['id', 'nickname'],
}, {
model: Image,
}]
}]
});
res.status(200).json(posts);
} catch (error) {
console.error(error);
next(error);
}
})
module.exports = router;
코드입니다.
답변을 작성해보세요.
0
거휘
질문자2021.10.26
[tag].js 에서 console.log로 mainposts가 불러와지고 있습니다. 그런데 화면처럼 불러와진 태그 밑으로 나머지 게시물들도 불러와지고 있습니다.
조현영
지식공유자2021.10.26
화면에 있는 에러때문에 업데이트가 안 되는 것입니다. mainPosts에 중복된 데이터가 있는 것 같은데, 혹시 데이터를 두 번 불러온 게 아닌가요?
거휘
질문자2021.10.26
말씀해주신것처럼 메인페이지에서 아래로 스크롤을 내리니 리덕스툴로 load posts 데이터가 두번 불러와진것 같습니다. 더이상 불러낼 데이터가 없는데도 스크롤을 내리니 한번 중복된 데이터가 불러와지고 이후로는 더이상 추가되진 않고 있습니다. 이게 또 항상 그런게 아니라 어떤땐 계속 정상적으로 동작하다가 간헐적으로 데이터가 중복되서 불러와지는것 같습니다. 어디서 문제인지 잘모르겠습니다..
거휘
질문자2021.10.26
해결한것 같습니다. 정확한 원인은 알수 없지만. post routes에서 오타나 입력값이 잘못된것 같습니다. 제로초님 깃헙 코드로 post routes 쪽을 수정하니 동일한 에러가 발생하지 않고 있습니다. 소중한 시간 내주셔서 감사합니다. 계속 강의 이어가겠습니다.
답변 1