현재 프로젝트에서 사용하고 있는 머티리얼 UI 토글 스위치에 문제가 있습니다. 구성 요소가 로드될 때 콘솔에 값을 기록하면 초기 값이 정확합니다. 그러나 "예"에서 "아니요"로 스위치를 클릭하면 "아니요"가 선택되었음을 나타내는 스위치가 올바르게 렌더링되고 콘솔 로깅이 다시 실행되지만 값은 여전히 "예"로 표시됩니다. 스위치를 다시 클릭하고 다시 "아니요"로 전환하려고 하면 전환이 전환되지 않고 다시 렌더링되고 콘솔 로깅이 다시 실행되며 이제 값이 "아니요"로 업데이트됩니다.따라서 기본적으로 첫 번째 클릭은 스위치를 뒤집고 두 번째 클릭은 값을 뒤집습니다. 이전에 동일한 토글 스위치를 문제 없이 사용한 적이 있는데, 클릭 시 스위치와 값이 전환되도록 하려면 무엇을 수정해야 하는지 말해 줄 수 있는 사람이 있나요?

입력 변경 처리:

const handlerInputChange = e => const { 이름, 값 } = e.target; setValues({ ...가치, [이름]: ( 값 유형 === 'string' ? (value).replace(/ +(?= )/g, '').trimStart() : value ) // 값이 문자열인 경우 선행 공백과 여러 공백을 제거합니다. }); };

다음 양식에서 호출되는 스위치:

<토글스위치 onChange={handleInputChange} label1='아니요' label2='예' 이름='useForCalcs' 값={values.useForCalcs} //>

ToggleSwitch 구성요소:

import *를 'react'에서 React로 가져옵니다. '@material-ui/core'에서 {Box, Switch, Typography}를 가져옵니다. 기본 함수 ToggleSwitch(props) 내보내기 { const { label1, label2, 이름, onChange, 값} = props; const [checked, setChecked] = React.useState(false); const ConvertToEventParams = (이름, 값) => ({ 대상: { 이름, 값 } }); const curValue = 값 === 1 ? true : false; const handlerSwitch = e => { setChecked(e.target.checked) }; React.useEffect(() => { setChecked(curValue); }, [curValue]) // 확인된 값이 변경될 때마다 토글 스위치를 다시 렌더링합니다. const handlerChecked = e => 핸들스위치(e); onChange(convertToEventParams(name, (checked === false ? 1 : 0))) // True/False를 1/0 값으로 변환 }; 반품 ( <박스> <타이포그래피> {라벨1} {<스위치 이름={이름} 확인됨={확인됨} 값={확인됨} onChange={handleChecked} inputProps={{'aria-label': '스위치'}} />} {라벨2}   ); }