로컬스트레인지 데이터 값 확인 후 같으면 배열 부분 수정 채택완료
하다가 막혔는데 검색해도 나오지 않아 조언을 얻고자 합니다.
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 onSubmit={handleSubmit}>
<ul>
<li>
<label>
<input type="radio" value="수입" name='revenue' onChange={onChangeInput} />수입
</label>
</li>
<li>
<label>
<input type="radio" value="지출" name='revenue' onChange={onChangeInput} />지출
</label>
</li>
</ul>
<label className='botLine'>
<input type="text" placeholder="사용 내역을 적어주세요.(필수 아님)" value={listTit} name="listTit" onChange={onChangeInput} />
</label>
<label className='botLine'>
<input type="number" placeholder="금액을 적어주세요.(필수)" value={won} name="won" onChange={onChangeInput} required />
<p>원</p>
</label>
<button type='submit'>등록</button>
</form>
리액트 구문을 사용하였으나 자바스크립트랑 비슷할것 같아서 여쭙니다ㅠㅠ
등록 버튼을 눌렀을 때
recipestate.id 값이랑 현재페이지 값이 같으면 아래처럼 list 에 데이터를 추가하고 싶습니다.
Copy
const recipestate = [
{
"id": 0,
"date": "2022.09.21" ,
"list": [
{
"num": 1,
"revenue" : "수입"
"listTit": "공차",
"won": 5000
}
]
},
{
]
//요 아래 부분은 제가 이것저것 해보다 나온건데 안되더라구여..
const handleSubmit = (e) => {
e.preventDefault();
const Datalist = {
list: [
{
num: current++,
revenue,
listTit,
won
}
]
}
setData(
Data.map((data) => {
return data.id === dnum ? [...Data, Datalist] : Data
})
)
};
답변 1개
3년 전
로컬스트레인지?
로컬스토리지 인것 같고 localStorage 관련 코드는 없는것 같네요
리액트 같은데 리액트에서 로컬스토리지 사용예시 링크 하나 남겨드립니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
3년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
저장된 데이터의 id값을 비교해서 데이터를 수정하고 싶은 것입니다.