테스트 사이트 - 개발 중인 베타 버전입니다

로컬스트레인지 데이터 값 확인 후 같으면 배열 부분 수정 채택완료

인찌 3년 전 조회 1,867

하다가 막혔는데 검색해도 나오지 않아 조언을 얻고자 합니다.

 

</p>

<p>//요런 데이터가 있습니다.</p>

<p>const recipestate = [</p>

<p>        {</p>

<p>            "id": 0,</p>

<p>            "date": "2022.09.21" ,</p>

<p>            "list": [</p>

<p>                {</p>

<p>                    "num":,</p>

<p>                    "revenue" : ""</p>

<p>                    "listTit": "",</p>

<p>                    "won": </p>

<p>                }</p>

<p>            ]</p>

<p>        },</p>

<p>{</p>

<p>            "id": 1,</p>

<p>            "date": "2022.09.22" ,</p>

<p>            "list": [</p>

<p>                {</p>

<p>                    "num":,</p>

<p>                    "revenue" : ""</p>

<p>                    "listTit": "",</p>

<p>                    "won": </p>

<p>                }</p>

<p>            ]</p>

<p>        }</p>

<p> </p>

<p>    ]</p>

<p> </p>

<p> </p>

<p><form onSubmit={handleSubmit}></p>

<p>                        <ul></p>

<p>                            <li></p>

<p>                                <label></p>

<p>                                    <input type="radio" value="수입" name='revenue'  onChange={onChangeInput} />수입</p>

<p>                                </label></p>

<p>                            </li></p>

<p> </p>

<p>                            <li></p>

<p>                                <label></p>

<p>                                    <input type="radio" value="지출" name='revenue'  onChange={onChangeInput} />지출</p>

<p>                                </label></p>

<p>                            </li></p>

<p>                        </ul></p>

<p> </p>

<p>                        <label className='botLine'></p>

<p>                            <input type="text" placeholder="사용 내역을 적어주세요.(필수 아님)" value={listTit} name="listTit" onChange={onChangeInput} /></p>

<p>                        </label></p>

<p>                   </p>

<p>                   </p>

<p>                   </p>

<p>                        <label className='botLine'></p>

<p>                            <input type="number" placeholder="금액을 적어주세요.(필수)" value={won} name="won" onChange={onChangeInput} required /></p>

<p>                            <p>원</p></p>

<p>                        </label></p>

<p> </p>

<p><button type='submit'>등록</button></p>

<p></form></p>

<p>

 

리액트 구문을 사용하였으나 자바스크립트랑 비슷할것 같아서 여쭙니다ㅠㅠ

등록 버튼을 눌렀을 때

recipestate.id 값이랑 현재페이지 값이 같으면 아래처럼 list 에 데이터를 추가하고 싶습니다.

 

</p>

<p>const recipestate = [</p>

<p>{</p>

<p>            "id": 0,</p>

<p>            "date": "2022.09.21" ,</p>

<p>            "list": [</p>

<p>                {</p>

<p>                    "num": 1,</p>

<p>                    "revenue" : "수입"</p>

<p>                    "listTit": "공차",</p>

<p>                    "won": 5000</p>

<p>                }</p>

<p>            ]</p>

<p>        },</p>

<p>{</p>

<p>]</p>

<p> </p>

<p> </p>

<p>//요 아래 부분은 제가 이것저것 해보다 나온건데 안되더라구여..</p>

<p>const handleSubmit = (e) => {</p>

<p>        e.preventDefault();</p>

<p>        const Datalist = {</p>

<p>            list: [</p>

<p>                {</p>

<p>                    num: current++,</p>

<p>                    revenue,</p>

<p>                    listTit,</p>

<p>                    won</p>

<p>                }</p>

<p>            ]</p>

<p>        }</p>

<p> </p>

<p>        setData(</p>

<p>            Data.map((data) => {</p>

<p>                return data.id === dnum ? [...Data, Datalist] : Data</p>

<p>            })</p>

<p>        )</p>

<p>    };</p>

<p>

 

 

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

답변 1개

3년 전

로컬스트레인지?

로컬스토리지 인것 같고 localStorage 관련 코드는 없는것 같네요

 

리액트 같은데 리액트에서 로컬스토리지 사용예시 링크 하나 남겨드립니다.

https://velog.io/@boyfromthewell/localStorage

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

답변에 대한 댓글 1개

인찌
3년 전
코드를 다 넣은 것은 아니고요 recipestate 요 데이터는 localStorage 안에 저장되어있습니다
저장된 데이터의 id값을 비교해서 데이터를 수정하고 싶은 것입니다.

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

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

로그인