LoginSignup
3
0

More than 5 years have passed since last update.

[React] {ComponentName} is changing an uncontrolled input of type text to be controlled

Last updated at Posted at 2017-03-21

webコンソールで警告発生

Warning: BasicInfo is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

closeされたisuues内にそれらしきものがありました。(日本語訳)
https://github.com/twisty/formsy-react-components/issues/66

明確にするために、最初に値propとしてundefinedまたはnullを渡すと、コンポーネントは「制御されていない」コンポーネントとして寿命を開始します。 コンポーネントと対話すると、値を設定してそれを "制御された"コンポーネントに変更し、警告を出します。

devブランチ(アルファクオリティ)は、より良いプロタイプのチェックを持っているので、将来これに関する警告を得るべきです。

なので、 undefinednull がpropsとして渡っているところを探し出して、デフォルトで ''(空文字)が入るようにしてあげました。

アンマウントされたコンポーネント内でのsetState、forceUpdate

react.js v0.13rcからアンマウント済みのコンポーネントでsetState、forceUpdateが呼ばれたとしても、例外throwするのではなくWarningで留まる様になった。PromiseによってResolveされるのが大きく遅延した場合などにコンポーネントが先にアンマウントされてしまい、結果的に後になって例外が発生してしまう現象をどうにかしてほしい、という要望に答えてくれたみたいです。以下、setStateをアンマウント後のコンポーネントで呼び出した例。

参考

https://github.com/twisty/formsy-react-components/issues/66
https://github.com/facebook/react/issues/6779
http://stackoverflow.com/questions/37427508/react-changing-an-uncontrolled-input
http://qiita.com/kenfdev/items/dbe10e2f0256e22945ca

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0