MUIのAutoCompleteに怒られた

MUIのAutoCompleteを実装していたらエラーが出ていたので調査。

エラー内容

MUI: A component is changing the controlled value state of Autocomplete to be uncontrolled.  Elements should not switch from uncontrolled to controlled (or vice versa).  Decide between using a controlled or uncontrolled Autocomplete element for the lifetime of the component.  The nature of the state is determined during the first render.  It's considered controlled if the value is not `undefined`.  More info: https://fb.me/react-controlled-components

エラー日本語訳

MUI: コンポーネントが、Autocomplete の制御された値の状態を非制御に変更しています。要素は非制御から制御に (またはその逆に) 切り替えるべきではありません。コンポーネントの存続期間中、制御された Autocomplete 要素と非制御の Autocomplete 要素のどちらを使用するかを決定します。状態の性質は最初のレンダリング時に決定されます。値が `undefined` でない場合は、制御されていると見なされます。詳細: https://fb.me/react-controlled-components

自分なりに噛み砕く

このエラー文を自分なりに噛み砕いて理解しようと思います。

制御・被制御された値とは

こちらの記事が参考になりました。

【React】制御コンポーネントと非制御コンポーネント - Qiita

フォームの入力値がStateで記述されるかRefで記述されるかの違いのようです。つまり「制御」が入力値がStateで「非制御」がRefのことです。

いつ、要素を非制御から制御に変更した？

いつ非制御から制御に変更したのか（またはその逆）と考えていたら、

状態の性質は最初のレンダリング時に決定されます。値が `undefined` でない場合は、制御されていると見なされます。

とエラー文の最後らへんに書いていまして、初期値がundefinedでなければフォームは制御（つまりState）ということを言っていました。なるほど。

じゃあ、どのように対応するか

対応方法を考えていると、下記のサイトが助かりました。

ホームページ- EY-Office

私と同様にAutoCompleteのValue値にundefinedを入れていたようで、undefinedのときはnullを入れる対応を取られていました。

まとめ

今回のエラーはAutoCompleteの初期値による制御コンポーネントと非制御コンポーネントの変更が問題であり、制御コンポーネントは初期値にStateを持つフォームのことで、非制御コンポーネントは初期値にRefを持つコンポーネントでした。対応としてStateで値を管理する場合はValueの初期値にundefinedを入れない対応をする必要がありました。

以上！