[오류] 리액트 datas is not iterableTypeError: datas is not iterable at onSubmit

728x90
반응형

[원인] 자식 컴포넌트에서 매개변수를 구조분해할당으로 안 가져옴. 

(전)

function AddMessage(datas, setData) {

(변경 후)

function AddMessage({datas, setData}) {


1.Home.jsx

const initialState = [
        { id: uuid(), name: '하니팬', content: '하니최고최고', idol: '하니' },
        { id: uuid(), name: '혜린팬', content: '혜린최고최고2', idol: '혜린' },
    ];
    const [datas, setData] = useState(initialState);
 
 
 <AddMessage datas={datas} setData={setData} />

▶ 여기에서 <AddMessage>를 컴포넌트로 만들어서 사용하기

▶ (기능) 댓글 남기기 기능과 유사 

 

2. AddMessage.jsx

import React from 'react';
import { useState } from 'react';
import uuid from 'react-uuid';

function AddMessage(datas, setData) {
    const [name, setName] = useState('');
    const [content, setContent] = useState('');
 
 <form
                onSubmit={(event) => {
                    event.preventDefault();

                    const newData = {
                        id: uuid(),
                        name,
                        content,
                        idol: selected,
                    };

                    setData([...datas, newData]);
                }}
>

▶새로운 데이터(댓글)을 남기려고 버튼을 클릭할 때마다 오류 발생 : onSubmit쪽에서 발생

▶새로운 데이터 (newData)와 기존데이터 (datas)를 스프레드 용법으로 [...datas,newData]로 추가하여 setData에 넣기

[원인] 매개변수를 구조분해할당으로 안 가져옴. (탄식)

(전)

function AddMessage(datas, setData) {

 

(변경 후)

function AddMessage({datas, setData}) {

 

 

TIL..

2시간은 이걸로 삽질했지만 그래도 찾았다.

조금 더 열심히 공부해야겠다.

반응형