react indexOf 사용 관련

Question

리액트에서 indexOf를 활용하여 state 값을 설정하려고 합니다.체크박스를 선택할때3이 존재할경우 [2,3,4 ] =>[2,4]3이 없는경우[2,5] => [2,5,3]=> [2,3, 5] 이렇게 상태 배열(recruitReg)을 만들려고 합니다.3이 있을때 체크박스를 선택할 경우 [1, 2, 3, 4,5] => [1,2,4,5]가 되어야 하는데, [3]으로 출력됩니다. 무엇이 잘못되었을까요?const [recruitReg, setRecruitReg] = useState([]); console.log(recruitReg) const checkRecruitReg = (val : number) => { if(recruitReg.includes(val)){ console.log('값이 존재합니다.'); const deleteIndex = recruitReg.indexOf(val); setRecruitReg(recruitReg.splice(deleteIndex,1).sort((a,b)=>a-b)); } else{ console.log('값 추가'); setRecruitReg([...recruitReg, val].sort((a,b)=>a-b)); } } //값 추가 (정상동작) //[1, 2, 3, 4, 5] //값이 존재합니다. //[3] <-- 잘못 출력

모집 권역

아시아 ) => checkRecruitReg(Number(e.target.value))}/> 북미 ) => checkRecruitReg(Number(e.target.value))}/> 유럽 ) => checkRecruitReg(Number(e.target.value))}/> 남미 ) => checkRecruitReg(Number(e.target.value))}/> 아프리카 ) => checkRecruitReg(Number(e.target.value))}/>

chief · Answer

onChange 로 넘어온 value 를 기준으로 검사하면 체크박스의 체크, 체크 해제를 검사할 수 없으니 체크가 되었으면 배열에 넣고, 체크가 빠졌으면 배열에서 제거하면 될 것 같습니다~

그린티라떼 · Answer

다음과 같이 변경하였습니다. const checkRecruitReg = (e : React.ChangeEvent) => { e.target.checked ? setRecruitReg([...recruitReg, Number(e.target.value)].sort((a,b)=>a-b)): setRecruitReg(recruitReg.filter(el=> el !== Number(e.target.value)).sort((a,b)=>a-b)) } ... 아시아

react indexOf 사용 관련

2개의 답변

Q&A 목록