すべての React コンポーネントには、 州 それらに関連付けられています。コンポーネントの状態は、ユーザーが実行したアクションへの応答、またはシステムによってトリガーされたイベントのいずれかによって変化する可能性があります。状態が変化するたびに、React はコンポーネントをブラウザーに再レンダリングします。状態の値を更新する前に、初期状態のセットアップを構築する必要があります。それが完了したら、 setState() メソッド 状態オブジェクトを変更します。これにより、コンポーネントが更新されたことが確認され、コンポーネントの再レンダリングが必要になります。
目次
React JS の setState
setState 非同期呼び出しであるということは、同期呼び出しが呼び出された場合、setState を使用して更新後にオブジェクトの現在の値を知る場合と同様、適切なタイミングで更新されない可能性があることを意味し、コンソール上に現在の更新された値が表示されない可能性があります。同期の動作を取得するには、オブジェクトの代わりに関数を setState に渡す必要があります。
構文：
setState() を使用して、コンポーネントの状態を直接変更することも、アロー関数を通じて変更することもできます。
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ 州名: prevState.州名 + 1 }))>> React アプリケーションを作成する手順:
ステップ1： 次のコマンドを使用して React アプリケーションを作成します。
Cで配列を使用した構造体
npx create-react-app foldername>
ステップ2： プロジェクト フォルダー (フォルダー名) を作成したら、次のコマンドを使用してそのフォルダーに移動します。
cd foldername>
プロジェクトの構造:
アプローチ 1: 単一属性の更新
内部で初期状態値を設定します。 コンストラクター関数 そして別の関数を作成します updateState() 状態を更新するため。ボタンをクリックすると、後者は onClickイベント これにより状態値が変更されます。 setState() メソッドを実行します。 updateState() 関数 書くことで：
this.setState({greeting : 'GeeksForGeeks welcomes you !!'})> ご覧のとおり、オブジェクトを setState() に渡しています。このオブジェクトには、更新したい状態の部分が含まれています。この場合は、次の値です。 挨拶 。 React はこの値を取得し、それを必要とするオブジェクトにマージします。これは、ボタン コンポーネントがgreeting の値の更新に何を使用するかを尋ね、setState() が答えを返すのと同じです。
JavaScript
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >greeting:> >'Click the button to receive greetings'>,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >updateState() {> >// Changing state> >this>.setState({> >greeting:>'GeeksForGeeks welcomes you !!'>,> >});> >}> >render() {> >return> (> >> >Greetings Portal> >>
>{>/* Set click handler */>}> > this.updateState}>クリックしてください！ ); デフォルトのアプリをエクスポートします。>> |
>
>
アプリケーションを実行する手順: プロジェクトのルート ディレクトリから次のコマンドを使用してアプリケーションを実行します。
Javaのstr.substring
npm start>
出力： ブラウザを開いて、次の場所に移動します。 http://ローカルホスト:3000/ を実行すると、次の出力が表示されます。
アプローチ 2: 複数の属性の更新
コンポーネントの状態オブジェクトには複数の属性を含めることができ、React では setState() 関数を使用してそれらの属性のサブセットのみを更新したり、複数の setState() メソッドを使用して各属性値を個別に更新したりすることができます。
3 つの異なる属性を初期化して初期状態を設定し、関数を作成します。 updateState() 呼び出されるたびに値が更新されます。もう一度、この関数は次のようにトリガーされます。 onClickイベント 同時に状態の更新された値を取得します。
JavaScript
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >test:>'Nil'>,> >questions:>'0'>,> >students:>'0'>,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >updateState() {> >// Changing state> >this>.setState({> >test:>'Programming Quiz'>,> >questions:>'10'>,> >students:>'30'>,> >});> >}> >render() {> >return> (> >> >Test Portal> >>
>>
>>
>{>/* Set click handler */>}> > this.updateState}>クリックしてください！ ); デフォルトのアプリをエクスポートします。>> |
>
>
アプリケーションを実行する手順: プロジェクトのルート ディレクトリから次のコマンドを使用してアプリケーションを実行します。
npm start>
出力： ブラウザを開いて、次の場所に移動します。 http://ローカルホスト:3000/ を実行すると、次の出力が表示されます。
アプローチ 3: 小道具を使用して状態値を更新します。
文字列の配列を設定します テストトピックス コンポーネントの小道具として。機能 トピックのリスト すべての文字列を状態のリスト項目としてマップするために作成されます トピック 。関数 状態の更新 がトリガーされ、トピックがリスト項目に設定されます。ボタンをクリックすると、更新された状態値が取得されます。このメソッドは、複雑なデータを処理し、状態を非常に簡単に更新できることでよく知られています。
配列リストのソート
JavaScript
Linuxの実行コマンド
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >static defaultProps = {> >testTopics: [> >'React JS'>,> >'Node JS'>,> >'Compound components'>,> >'Lifecycle Methods'>,> >'Event Handlers'>,> >'Router'>,> >'React Hooks'>,> >'Redux'>,> >'Context'>,> >],> >};> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >testName:>'React js Test'>,> >topics:>''>,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >listOfTopics() {> >return> (> >>> >{>this>.props.testTopics.map((topic) =>(> >{topic}> >))}> >>>);> >}> >updateState() {> >// Changing state> >this>.setState({> >testName:>'Test topics are:'>,> >topics:>this>.listOfTopics(),> >});> >}> >render() {> >return> (> >> >Test Information> >>
>>
>{>/* Set click handler */>}> > this.updateState}>クリックしてください！ ); デフォルトのアプリをエクスポートします。>> |
>
>
アプリケーションを実行する手順: プロジェクトのルート ディレクトリから次のコマンドを使用してアプリケーションを実行します。
npm start>
出力： ブラウザを開いて、次の場所に移動します。 http://ローカルホスト:3000/ を実行すると、次の出力が表示されます。
アプローチ 4: 以前の値を使用して状態を更新します。
初期状態を作成します カウント 値は 0 です。関数 updateState() 呼び出されるたびに、状態の現在値が 1 ずつ増加します。今回はアロー関数で setState() メソッドを渡して使用します。 前の状態 パラメータとして。状態の現在の値には次のようにアクセスします。 prevState.stateName ボタンを押すたびに 1 ずつ増加します。このメソッドは、前の値に依存する方法で状態に値を設定する場合に非常に便利です。 例えば 、ブール値 (true/false) を切り替えるか、数値を増減します。
機械学習とその型
JavaScript
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >count: 0,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >updateState() {> >// Changing state> >this>.setState((prevState) =>{> >return> { count: prevState.count + 1 };> >});> >}> >render() {> >return> (> >> >Click Counter> >>
>{>/* Set click handler */>}> > this.updateState}>クリックしてください！ ); デフォルトのアプリをエクスポートします。>> |
>
>
アプリケーションを実行する手順: プロジェクトのルート ディレクトリから次のコマンドを使用してアプリケーションを実行します。
npm start>
出力： ブラウザを開いて、次の場所に移動します。 http://ローカルホスト:3000/ を実行すると、次の出力が表示されます。
