ホームページ > 記事 > ウェブフロントエンド > React コンポーネントで「setState」にアクセスできないのはなぜですか?
Uncaught TypeError: Cannot Access 'setState' Property in React
React を使用する場合、「Uncaught TypeError: Cannot Access」というエラーが発生する場合があります。未定義のプロパティ「setState」を読み取りました。」この問題は、適切にバインドされていないコンポーネントの「setState」メソッドにアクセスしようとすると発生します。
「setState」メソッドは、React コンポーネントの状態を更新するために使用されます。コンポーネントを定義するときは、「this」が正しいスコープを参照するように、そのメソッドをコンポーネント インスタンスにバインドする必要があります。このエラーは、コンポーネント メソッドが明示的にバインドされずにコンストラクターの外部で呼び出された場合によく発生します。
例:
次のコード スニペットを考えてみましょう:
<code class="javascript">class Counter extends React.Component { constructor(props) { super(props); this.state = { count : 1 }; this.delta.bind(this); // Binding delta incorrectly } delta() { this.setState({ count : this.state.count++ }); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick={this.delta}>+</button> </div> ); } }</code>
この例では、「delta」メソッドはコンストラクター内のコンポーネントにバインドされていません。その結果、「delta」が呼び出されたとき、「this」はコンポーネント インスタンスを参照せず、「unknown」から「setState」にアクセスできないため、エラーが発生します。
解決策:
この問題を解決するには、コンストラクターで「delta」メソッドをコンポーネントに適切にバインドする必要があります。
<code class="javascript">constructor(props) { super(props); this.state = { count : 1 }; this.delta = this.delta.bind(this); // Correctly binding delta }</code>
「this.delta = this.delta」を設定することで、 .bind(this)' の場合、バインドされた関数を 'this.delta' に割り当てます。これにより、「delta」が呼び出されたときに「this」がコンポーネント インスタンスを参照し、「setState」メソッドにアクセスできるようになります。
以上がReact コンポーネントで「setState」にアクセスできないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。