개발자
리액트에서 라디오그룹이 원하는대로 동작하지 않아요..
react-hook-form을 사용하고있고, medias는 useFieldArray를 사용하는중인데요. medias에 feeFlag라는 값이 있고 이 값은 '1' | '0' 둘중에 하나인데요. 값이 0인 경우에는 라디오그룹에서 버튼이 yes/no 왔다갔다 선택이 되는데.. 서버의 값이 1인 경우에는 yes에서 고정된 상태로 no가 선택이 되지 않습니다. 뭐가 문제인지를 도통 모르겠어서요.. 이틀째 라디오그룹 버튼 선택이 안되는 문제에 막혀있습니다... ㅠㅠ
1<Controller
2 name={`medias.${selectedIndex}.feeFlag`}
3 control={control}
4 render={({ field }) => (
5 <RadioGroup
6 row
7 aria-label="media-feeFlag"
8 name="feeFlag"
9 value={field.value}
10 onChange={(event) => field.onChange(event.target.value)}
11 >{field.value}
12 <FormControlLabel
13 value="1"
14 control={<Radio />}
15 label="YES"
16 labelPlacement="end"
17 />
18 <FormControlLabel
19 value="0"
20 control={<Radio />}
21 label="NO"
22 labelPlacement="end"
23 />
24 </RadioGroup>
25 )}
26/>
답변 1
아래 코드입니다
1<Controller
2 name={`medias.${selectedIndex}.feeFlag`}
3 control={control}
4 render={({ field }) => (
5 <RadioGroup
6 row
7 aria-label="media-feeFlag"
8 {...field}
9 >
10 <FormControlLabel
11 value="1"
12 control={<Radio />}
13 label="YES"
14 labelPlacement="end"
15 />
16 <FormControlLabel
17 value="0"
18 control={<Radio />}
19 label="NO"
20 labelPlacement="end"
21 />
22 </RadioGroup>
23 )}
24/>지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 04월 26일
이 문제는 리액트의 상태 업데이트 행동과 관련된 것 같습니다. `react-hook-form`에서 제공하는 `Controller`는 내부적으로 `useEffect`를 사용하여 state 변경을 감지하고 처리합니다. 그러나 이 경우, 서버에서 오는 값이 문자열 '1' 또는 '0'인데, 이것이 RadioGroup의 value로 들어가면서 타입 변환이 일어나는 것으로 보입니다. 그래서 '1'은 true로, '0'은 false로 해석되어져 비정상적인 동작을 보일 가능성이 있습니다. 문제를 해결하기 위해, 다음과 같이 수정해보세요: ```typescript <RadioGroup row aria-label="media-feeFlag" name="feeFlag" value={field.value === '1'} onChange={(event) => field.onChange(event.target.checked ? '1' : '0')} > <Field.value: {field.value}> ... ``` 위 코드에서 `field.value === '1'` 부분은 boolean 값을 반환하므로 항상 원하는대로 동작합니다. 또한, onChange 핸들러를 수정하여 체크박스의 checked 상태에 따라 직접적으로 문자열을 변경하도록 만들었습니다. 이렇게 하면 기존에 string으로 받아오던 값을 boolean으로 처리하게 되며, onChange 부분도 체크박스 상태에 맞추어 값을 정할 수 있기 때문에 문제가 해결될 것입니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!