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

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

(전)

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시간은 이걸로 삽질했지만 그래도 찾았다.

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