警告:コンポーネントが、テキスト型の制御された入力を制御されないように変更しています。



Warning Component Is Changing Controlled Input Type Text Be Uncontrolled



今日踏んだピット、参考のために振り返ってください:

エラーメッセージ:



Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

フォームコンポーネントのコード

//First import React, {Component} from 'react' export default class Form extends Component{ render(){ let {change,val} = this.props return( { / / event pass is not less (here less, will report the above warning) Change (event) / / this event is also indispensable, less error will be reported (Uncaught TypeError: Cannot read property 'target' of undefined) } }/> ) } } //the second class Top extends React.Component{ constructor(props){ super(props) this.state = { val:'' } this.change = this.change.bind(this) } change(event){ this.setState({ val:event.target.value }) } render(){ let{val} = this.state return( //Introduction to the Form component ) } }

私自身の間違いは、イベントに渡されるイベントパラメータがないことです。以下はForm.jsのコアコードです(App.jsのコードはかなりコアです)



{ Change (event) ** bold style** } }/>

最初のイベントは通過せず、上記の警告が報告されます。その理由は、App.jsのevent.targetが入力オブジェクトではないためです。私はそれを印刷しました、そしてそれは明らかに値属性ではありません。 Event.target.valueは実際には未定義であり、結果は当然間違っています。

2つ目は合格しなかったため、これは誤って報告される必要があります。レポートをテストしようとした間違いは次のとおりです。
Uncaught TypeError:未定義のプロパティ「ターゲット」を読み取ることができません

実際、上記の2つの質問は、JSがほぼ同じである限りよく理解されていますが、無視してエラーの原因を注意深く確認することもありますが、それでも良い解決策です。