Cộng đồng Hỏi & Đáp của Inflearn

puma18003806

câu hỏi đã được viết

[Gia hạn] Tạo NodeBird SNS bằng React

pages/document client/index 질문입니다

Viết

575

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

Câu trả lời 2

puma18003806

Người đặt câu hỏi

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

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

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

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

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

zerocho

Người chia sẻ kiến thức

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

puma18003806

Người đặt câu hỏi

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

zerocho

Người chia sẻ kiến thức

코드를 올려보세요.

puma18003806

Người đặt câu hỏi

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

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;