인프런 커뮤니티 질문&답변
작성한 질문수
오류 어디 봐야하나요??
해결된 질문
작성
·
201
0
index.js:43 {mainPosts.map((post) => ( 이부분입니다
_App.js:14 <Component /> 여기인데 원인을 모르겠네요
pages/_App.js
import React from 'react';
import 'antd/dist/antd.css';
import Head from 'next/head';
import PropTypes from 'prop-types';
import wrapper from '../store/configureStore';
const NodeBird = ({Component}) => (
<>
<Head>
<meta charSet='utf-8' />
<title>NodeBird</title>
</Head>
<Component />
</>
);
NodeBird.propTypes = {
Component: PropTypes.elementType.isRequired
};
export default wrapper.withRedux(NodeBird);pages/index
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import AppLayout from '../components/AppLayout';
import PostForm from '../components/PostForm';
import PostCard from '../components/PostCard';
import { LOAD_POSTS_REQUEST } from '../reducers/post';
const Home = () => {
const dispatch = useDispatch();
const {me} = useSelector((state) => state.user);
const {mainPosts, hasMorePosts, loadPostsLoading} = useSelector((state) => state.post);
useEffect(() => {
dispatch({
type: LOAD_POSTS_REQUEST
});
}, []);
useEffect(() => {
function onScroll() {
// scrollY: 얼마나 내렸는지, clientHeight: 화면에 보이는 길이, scrollHeight: 총 길이
console.log(window.scrollY,
document.documentElement.clientHeight,
document.documentElement.scrollHeight);
if(window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
if(hasMorePosts && !loadPostsLoading) {
dispatch({
type: LOAD_POSTS_REQUEST,
data: mainPosts[mainPosts.length - 1].id,
});
}
}
}
window.addEventListener('scroll', onScroll);
return() => {
window.removeEventListener('scroll', onScroll);
};
}, [mainPosts, hasMorePosts, loadPostsLoading]);
return (
<AppLayout>
{me && <PostForm />}
{mainPosts.map((post) => (
<PostCard key={post.id} post={post} />
))}
</AppLayout>
);
};
export default Home;
github 코드랑 강의코드랑 다른거 같아요..
github 보면서 index쪽이랑 _app쪽 코드 바꿔봤는데 안되네요
어디쪽 문제일까요 ??
그리고 faker 이렇게 뜨는데 안되는거 같아요
reducers/post.js
faker 강의 들을때 이부분 에러 나서 주석처리하니까 정상작동 됐어요
faker 4버전,5버전 둘다 해봐도 안됐어요 지금은 4버전 설치되있어요
근데 첫번째 에러 해결해야 faker쪽 에러 확인 가능할듯 합니다
답변 1
0
mainPosts가 배열이 아니라서 문제인 것입니다. mainPosts를 건드는 쪽을 집중적으로 보셔야 하고요. 리듀서 쪽일 겁니다. 그리고 faker 관련 이슈일 수도 있습니다.
redux-devtools 이렇게 뜹니다
pages/index.js
여기 주석 처리하면 정상작동 되는데 보니까 삭제 기능이 사라져 있네요..
이 부분은 어디로 가야하나요 ㅠㅠ
saga/post.js , reducers/post.js 안에 REMOVE_POST 다 확인했는데 왜이러죠
문제를 하나씩 해결하세요. mainPosts 문제부터 해결 후에 삭제 쪽을 보시고요. 혼자만 보지 마시고 코드를 올려주세요.
다음 영상 보시는 게 좋을 것 같습니다.
지금 보니까 LOAD_POSTS_SUCCESS의 data가 배열이 아니라 문자열로 들어옵니다. 그래서 reducer에서도 배열이 아니라 문자열이 되는 것이고요. LOAD_POSTS_SUCCESS를 하는 곳을 봐야겠죠.
찾았어요
sagas/post.js 안에 loadPosts
function* loadPosts(action) {
try {
// const result = yield call(loadPostAPI, action.data)
yield delay(1000);
yield put({
type: LOAD_POSTS_SUCCESS,
data: generateDummyPost(10)
});
} catch (err) {
yield put({
type: LOAD_POSTS_FAILURE,
data: err.response.data
});
}
}
reducer/post.js 안에 generateDummyPost
export const generateDummyPost = (number) => Array(number).fill().map(() => ({
id: shortId.generate(),
User: {
id: shortId.generate(),
nickname: faker.name.fineName()
},
content: faker.lorem.paragraph,
Images: [{
src: faker.image.imageUrl()
}],
Comments: [{
User: {
id: shortId.generate(),
nickname: faker.name.findName()
},
content: faker.lorem.sentence()
}],
}));data에 다른거 들어가 있어서 고쳤는데 generateDummyPost 이거는 faker인데
faker 위에 본문 보시면 4,5버전 다 저렇게 뜨면서 안되서 그런지 무한 로딩 걸리네요...
catch (err) {
console.error(err);
yield put({
type: LOAD_POSTS_FAILURE,
data: err.response.data
});에러 안뜨는거 같아요
vsCode에는 에러 안뜹니다
콘솔 오류
reducers쪽 코드 보면서 비교해도 똑같은거 같아요ㅠ
github에 reducers폴더 복붙해도 똑같은 에러 뜨고..
여기가 아닌거 같아요..
index.js
post.js
user.js