警告:入力により、制御対象のテキスト型の制御されていない入力が変更されています。



Warning Input Is Changing An Uncontrolled Input Type Text Be Controlled



Pythonエンジニア向けの2019Unicorn Enterprise Heavy Recruitment Standard >>> hot3.png

反応入力警告



Warning: Input 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

warning.js?6327:33 Warning: `value` prop on `input` should not be null. Consider using the empty string to clear the component or `undefined` for uncontrolled components. in input (created by Input) in Input (created by AdvertisementEdit) in div (created by FormGroup) in FormGroup (created by AdvertisementEdit) in div (created by Col) in Col (created by AdvertisementEdit) in div (created by Row) in Row (created by AdvertisementEdit) in div (created by CardBlock) in CardBlock (created by AdvertisementEdit) in div (created by Card) in Card (created by AdvertisementEdit) in AdvertisementEdit (created by Connect(AdvertisementEdit)) in Connect(AdvertisementEdit) (created by Route) in Route (created by Full) in Switch (created by Full) in div (created by Container) in Container (created by Full) in main (created by Full) in div (created by Full) in div (created by Full) in Full (created by Route) in Route in Switch in Router (created by ConnectedRouter) in ConnectedRouter in Provider

React開発では、そのような警告が表示されるたびに、OCDでは実際にクラッシュします。



コードは以下のように表示されます

{children}

理由分析:Selectコンポーネントはデフォルト値を設定する必要があり、この値はインターフェースによって与えられます。フロントエンドが独自の値を定義している場合、reactはインターフェースを介して返されるため、問題はありません。データには一定の期間があります。コンポーネントを最初にレンダリングするとき、defaultValueはすでに有効になっています。後で再レンダリングしても、デフォルト値は変更されません。

defaultValueはデフォルト値であり、最初に設定されたときに有効になり、値は現在の選択値になります。設定値= {this.state.value}は、Select isthis.state.valueの現在の値と同じです。



参考資料: ReactフォームコンポーネントはdefaultValueまたはvalueを使用します

解決策:defaultValueをvalueに変更します。

{children}

転載:https://my.oschina.net/johnsken/blog/1630605