중첩배열에 데이터 추가하기 채택완료
인찌
3년 전
조회 2,370
리액트를 기본으로 하고있습니다.
localStorage에 아래와 같은 기본 중첩 배열이 있습니다.
</p>
<pre>
<code>const recipestate = [
{
"id": 0,
"date": "2022.09.21" ,
"list": [
{
"num":,
"revenue" : ""
"listTit": "",
"won":
}
]
},
{
"id": 1,
"date": "2022.09.22" ,
"list": [
{
"num":,
"revenue" : ""
"listTit": "",
"won":
}
]
}
]</code>
</pre>
<p>
위 데이터에 form을 사용해서 버튼을 클릭하면
데이터에 id값과 dnum 이라는 변수를 비교해서 같으면 list 라는 데이터에 순차적으로 데이터를 추가시키고 싶습니다.
</p>
<p> setData(</p>
<p> Data.map((data) => {</p>
<p> return data.id === dnum ? "list값에 데이터 쌓임" : "그대로"</p>
<p> })</p>
<p> )</p>
<p> </p>
<p><code>"list": [ { "num": 1, "revenue" : "" "listTit": "", "won": }, { "num": 2, "revenue" : "" "listTit": "", "won": } ]</code></p>
<p><code>// 요런식으로 쌓이고 싶습니다. </code></p>
<p> </p>
<p> </p>
<p><code>아래는 제가 생각한 방법인데 그냥 아래로 쌓이네요ㅠ</code></p>
<p>const [Data, setData] = useState(recipestate);</p>
<p>const [Listuse, setListuse] = useState(Data[dnum].list)</p>
<p> </p>
<p>const nextId = useRef(0)</p>
<p> const handleSubmit = (e) => {</p>
<p> e.preventDefault();</p>
<p> const Datalist = {</p>
<p> num: nextId.current,</p>
<p> revenue,</p>
<p> listTit,</p>
<p> won</p>
<p> }</p>
<p> setListuse(</p>
<p> [...Listuse, Datalist]</p>
<p> )</p>
<p> setData(</p>
<p> [...Data, Listuse]</p>
<p> )</p>
<p> </p>
<p> nextId.current += 1;</p>
<p> };</p>
<p> </p>
<p>
제가 검색을 해도 리액트로 중첩배열에 데이터 추가하는 방법을 모르겠어서 혹시 아시는 분이 계실까 적습니다!ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
3년 전
</p>
<p>data.map((item) => {</p>
<p> if (item.id === dnum) {</p>
<p> let obj = {};</p>
<p> obj.num = "1";</p>
<p> obj.listTit = "2";</p>
<p> obj.won = "3";</p>
<p> item.list.push(obj);</p>
<p> }</p>
<p> return item;</p>
<p> });</p>
<p>
이거 활용하면 가능 하지 않을가요?
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
인찌
3년 전
댓글 달아줘서 감사합니다! 다행이 이것저것 해보다가 얻어걸려서 해결했습니다! 감사합니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인