MUI 스위치를 클릭하면 표시 및 값을 업데이트할 수 없습니다.

Question

현재 프로젝트에서 사용하고 있는 머티리얼 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}
      </타이포그래피>
    </박스>
  );
}

Answer 1

ToggleSwitch 구성 요소에서 상태와 선택된 값을 처리하고 있습니다. 로컬 상태(선택됨)와 소품(값)이 모두 있고 이를 동기화하려고 합니다.

이 문제를 해결하려면 스위치와 값이 올바르게 동기화되었는지 확인하세요

상위 구성 요소에서 값 prop을 전달하고 해당 prop을 직접 사용하여 스위치 상태를 확인할 수 있습니다. 불필요한 상태와 효과를 제거하여 구성 요소 코드를 단순화할 수 있습니다.

value prop을 직접 사용하여 스위치의 초기 상태를 확인하고 onChange 함수를 사용하여 상위 구성 요소를 업데이트할 수 있습니다.

으아악