MUI: The value provided to Autocomplete is invalid

스택티콘에 깃허브 repository에서 skill set을 추출하는 작업을 완성한 후, 아래와 같은 에러가 발생했다.

해당 에러는 아래와 같은 이유로 발생했다.

1.기존 AutoComplete에 렌더링 되는 옵션들은 SimpleIcons[] 으로 타이핑 되어 있다.
2. SimpleIcon에 있는 아이콘 이외에 커스텀 아이콘들은 기존 SimpleIcons 타입에 추가되어 있지 않다.
3. 따라서 커스텀 아이콘들에 대한 타입은 SimpleIcons에 존재하지 않는다.

해결 방법

해결은 두 가지로 가능하다.

첫 번째는 SimpleIcons를 확장해 CustomIcons의 타입과 병합한 새로운 타입을 사용하는 방법이다.

두 번째는 AutoComplete의 isOptionEqualToValue 를 이용하는 방법이다. 관련 공식 문서 링크

해당 메소드는 option 객체가 아닌 option의 값을 통해 일치 여부를 판별하는 것이다.

스택티콘에서 선택한 방법

스택티콘에서는 2번째 해결책을 선택해, icon 정보의 slug를 비교해 두 정보가 일치한다면 두 옵션이 같은 것으로 판별하도록 했다.

<Autocomplete
  ...
  options={iconArr}
  isOptionEqualToValue={(option, value) => {
    return option.slug === value.slug;
  }}
  ...
/>

현재 커스텀 아이콘의 타입을 사용해야 하는 곳이 AutoComplete밖에 없기 때문에 선택한 결정이다. 후에 다른 곳에서도 커스텀 아이콘의 값들에 대한 타입을 사용해야 하는 곳이 생기면 1번 방법으로 변경할 예정이다.