[MUI] Material-UI: A component is changing the controlled checked state of SwitchBase to be uncontrolled

Material-UI: A component is changing the controlled checked state of SwitchBase to be uncontrolled.

이런 에러를 본 적이 있는가?

 

개발자 도구로 보면 이렇게 뜨겠지

optional chaining으로 비교적 안전하게(?) value array에서 가져온 값은 boolean인가? value가 만약 없다면?

체크박스를 여러 개 만든 후, value array에 있는 값을 각각 넘겨주었다. 초기 render를 할 땐 문제가 없다.

 

value는 개발자가 초기 render를 할 때 무조건 있도록 만들었을 것이다.

 

그런데, 이후 사용자의 행동으로 value가 없어진다면 위와 같은 에러가 발생한다. value가 없으면 checked의 값은 뭘까?

 

위의 Error에서 나타내고 있다. undefined가 반겨줄 것이다.

 

value가 없을 땐 false를 던져주도록 하자.

checked에 undefined가 넘겨지지 않도록 value가 없을 경우 false를 던져주면 된다.

 

!!를 몰라도 괜찮다. checked = { value?.[0] | false } 을 써도 된다.