Inflearn Community Q&A

puma18003806

asked

[Renewal] Creating NodeBird SNS with React

pages/document client/index 질문입니다

Written on

560

선생님 /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 |   }

reduxnodejsexpressreactNext.js

Answer 2

puma18003806

Questioner

server안 pages안 profile 파일이 profile.jsx 이죠?

자동으로 만들어진파일이라 에러안생길줄 알았는데 ㅠ

node_modules\react-dom\cjs\react-dom-server.node.development.js:39 이런 에러가

한 8개정도 터미널에 뜨는데 찿아도 고칠줄 모르겠고 ㅠ

혹시 다른분들도 이런에러 뜨나요? 제 vs만 이상한건가 궁금하네요

zerocho

Instructor

Profile.jsx는 자동으로 만들어진 파일이 아니라 강좌에서 직접 만든 파일입니다.

puma18003806

Questioner

감사합니다 열심히 찿아보겠습니다

zerocho

Instructor

코드를 올려보세요.

puma18003806

Questioner

선생님 알려주신대로 해본결과

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;