2026, 새로운 도약을 시작합니다.

중첩배열에 데이터 추가하기 채택완료

리액트를 기본으로 하고있습니다.

localStorage에 아래와 같은 기본 중첩 배열이 있습니다.

Copy



const recipestate = [
{
            "id": 0,
            "date": "2022.09.21" ,
            "list": [
                {
                    "num":,
                    "revenue" : ""
                    "listTit": "",
                    "won": 
                }
            ]
},
{
            "id": 1,
            "date": "2022.09.22" ,
            "list": [
                {
                    "num":,
                    "revenue" : ""
                    "listTit": "",
                    "won": 
                }
            ]
}
 
]


위 데이터에 form을 사용해서 버튼을 클릭하면 

데이터에 id값과 dnum 이라는 변수를 비교해서 같으면 list 라는 데이터에 순차적으로 데이터를 추가시키고 싶습니다.

Copy


        setData(

            Data.map((data) => {

                return data.id === dnum ? "list값에 데이터 쌓임" : "그대로"

            })

        )

 

"list": [ { "num": 1, "revenue" : "" "listTit": "", "won": }, { "num": 2, "revenue" : "" "listTit": "", "won": } ]

// 요런식으로 쌓이고 싶습니다. 

 

 

아래는 제가 생각한 방법인데 그냥 아래로 쌓이네요ㅠ

const [Data, setData] = useState(recipestate);

const [Listuse, setListuse] = useState(Data[dnum].list)

 

const nextId = useRef(0)

    const handleSubmit = (e) => {

        e.preventDefault();

        const Datalist = {

            num: nextId.current,

            revenue,

            listTit,

            won

        }

        setListuse(

            [...Listuse, Datalist]

        )

        setData(

            [...Data, Listuse]

        )

 

        nextId.current += 1;

    };

 

제가 검색을 해도 리액트로 중첩배열에 데이터 추가하는 방법을 모르겠어서 혹시 아시는 분이 계실까 적습니다!ㅠㅠ

답변 1개

채택된 답변
+20 포인트
Copy


data.map((item) => {

        if (item.id === dnum) {

            let obj = {};

            obj.num = "1";

            obj.listTit = "2";

            obj.won = "3";

            item.list.push(obj);

        }

        return item;

    });

이거 활용하면 가능 하지 않을가요?

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

댓글 달아줘서 감사합니다! 다행이 이것저것 해보다가 얻어걸려서 해결했습니다! 감사합니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고