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시간은 이걸로 삽질했지만 그래도 찾았다.
조금 더 열심히 공부해야겠다.
반응형