React MUI の TextField で value が更新されない場合

React MUI の TextField を使っていて、value の値が更新されているのに画面に反映されない場合は、defaultValue を使ってしまっていないか確認します。

defaultValue を使っている場合、コンポーネントは非制御になっているので、値が更新されても反映されません。

代わりに value を使います。

例えば以下の場合、上のinputはmyValueに合わせて更新されますが下はされません。

<TextField value={myValue} />        //更新される
<TextField defaultValue={myValue} /> //更新されない

楽しかったこと

  • 久しぶりに仕事でリファクタリングできた。リファクタリングが一番好きかもしれない。なんか掃除している感じで楽しい。でも実際の掃除はあまり好きではない