ISSUEではMaterialUIのAutocompleteコンポーネントを使って、
スキル登録できるようにしています。

しかし、そのスキルの初期値が設定されないバグに遭遇し、
悩んだのでその解決策を載せておきます。


# 解決策

Autocompleteコンポーネントが描画される前に、
初期値のロードを完了しておきましょう。

具体的には以下のように、
Loadingが完了してからAutocompleteを描画するようにして対策をとりました。

スキルデータロード前に描画するコンポーネント
![img](/mosaic-code.jpg)

スキルデータロード後に描画するコンポーネント
![img](/mosaic-code.jpg)

ISSUEではMaterialUIのAutocompleteコンポーネントを使って、
スキル登録できるようにしています。

しかし、そのスキルの初期値が設定されないバグに遭遇し、
悩んだのでその解決策を載せておきます。


# 解決策

Autocompleteコンポーネントが描画される前に、
初期値のロードを完了しておきましょう。

具体的には以下のように、
Loadingが完了してからAutocompleteを描画するようにして対策をとりました。

スキルデータロード前に描画するコンポーネント
```js
if (topicLoading) {
  return (
    <DefaultLayout>
      <Meta title="トピック投稿 | ISSUE" />
      <Loading></Loading>
    </DefaultLayout>
  )
 }
```

スキルデータロード後に描画するコンポーネント
```js
<Controller
  rules={{
    required: 'スキルを入力してください',
  }}
  render={({ field }) => (
    <Autocomplete
       multiple
       options={displaySkills}
       value={getValues('skills')} // 描画前にskillsを読み込んでおく
       ...
       renderInput={(params) => (
         <TextField
           ...
          />
        )}
      />
    )}
  name="skills"
  control={control}
/>
```