인프런 커뮤니티 질문&답변
작성한 질문수
pages/document client/index 질문입니다
22.10.04 16:40 작성
·
478
0
선생님 /profile 접속하니 아래와 같은 에러가 뜨는데
구글링해도 안나와서 도움요청드립니다
TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
이부분만 구글링했을땐 뜻은 알겠는데 아래처럼
내부파일들 에러가 뜨니 모르겠네요 ㅠ
Unhandled Runtime Error
TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
Source
client\index.tsx (473:6) @ renderReactElement
471 | }
472 | } else {
> 473 | ReactDOM.render(reactEl, domEl, markRenderComplete)
| ^
474 | }
475 | }
476 | }Server Error
TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages\_document.tsx (91:33) @ Function.getInitialProps
89 | }
90 |
> 91 | const { html, head } = await ctx.renderPage({ enhanceApp })
| ^
92 | const styles = [...flush()]
93 | return { html, head, styles }
94 | }답변 2
0
2022. 10. 04. 17:36
server안 pages안 profile 파일이 profile.jsx 이죠?
자동으로 만들어진파일이라 에러안생길줄 알았는데 ㅠ
node_modules\react-dom\cjs\react-dom-server.node.development.js:39 이런 에러가
한 8개정도 터미널에 뜨는데 찿아도 고칠줄 모르겠고 ㅠ
혹시 다른분들도 이런에러 뜨나요? 제 vs만 이상한건가 궁금하네요
2022. 10. 04. 18:42
선생님 알려주신대로 해본결과
profile.js에 <NicknameEditForm> 만 썻을땐 검색창만 출력이 잘되는데
<FollowList>를 쓰니까 에러가 뜨네요 ㅠㅠ
import Head from "next/head";
import React from "react";
import AppLayout from "../components/AppLayout";
import FollowList from "../components/FollowList";
import NicknameEditForm from "../components/NicknameEditForm";
const Profile = () => {
const followerList = [{nickname:'나이스'}, {nickname:'킴'}, {nickname:'노드버드'}];
const followingList = [{nickname:'나이스'}, {nickname:'킴'}, {nickname:'노드버드'}];
return (
<>
<Head>
<title>내 프로필 | NodeBird</title>
</Head>
<AppLayout>
<NicknameEditForm></NicknameEditForm>
<FollowList></FollowList>
</AppLayout>
</>
);
};
export default Profile;
import React from "react";
import { Card, List, Button } from "antd";
import { StopOutlined } from "@ant-design/icons";
import PropTypes from 'prop-types';
const FollowList = ({ header, data }) => {
return (
<List
style={{ marginBottom : 20 }}
grid={{ gutter:4, xs:2, md:3 }}
header={<div>{header}</div>}
size='small'
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'/>]}>
<Card.Meta description={item.nickname}/>
</Card>
</List.Item>
)}
/>
)
};
FollowList.propTypes = {
header: PropTypes.string.isRequired,
data: PropTypes.array.isRequired,
};
export default FollowList;
2022. 10. 04. 20:12
헉 비교해보며 방금 찿았는데
dataSource={{data}}
가 아니고
{data} 였네요..
자동적으로 만들어진 파일에 에러가 생기는줄 알고 멘붕했었는데
역시
제 실수였네요 ㅠㅠ
신경써주셔서 너무 감사드립니다!!!!!
0
2022. 10. 04. 17:23
Profile.jsx에서 에러가 있을 수 있습니다. 에러를 찾으려면 주석 처리를 해보면서 어떤 부분을 주석처리했을 때 에러가 없어지는지 확인해보면 좋습니다. 그 때 주석처리한 부분이 문제거든요.
2022. 10. 04. 18:15
Profile.jsx는 자동으로 만들어진 파일이 아니라 강좌에서 직접 만든 파일입니다.