Edited at

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

More than 1 year has passed since last update.


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