React でのクリックの繰り返しを避ける方法

繰り返しクリックを防ぐためのアイデア:

データのリクエストが開始されると、終了するまで次のリクエストを行うことはできません。クリックしないと、対応するプロンプトが表示されます。

具体的な方法:

状態の初期設定:

state={
   bool:true,
}

クリックイベントの設定:

btn_click = async () => {
	this.setState({
	   bool: false,
	})
	.
	.
	.
	if(this.state.bool){
		const value = await fetch.bbb({})
		if (value.code == 1) {
		
		} else {
		
		}
		this.setState({
		bool: true,
		})
	}
}

分析:

ブール値が true の場合、リクエストを実行します。複数のクリックが発生した場合、メソッドの先頭に設定された bool:false が有効になり、リクエストが完了する前に処理されるのを防ぎます。 request;

次に、リクエストが完了したら、このリクエストが完了した後に次のリクエストを実行できるように Bool のステータスを変更します。

メソッドの先頭が false に設定されていてもリクエストが実行されるという事実については、非同期メカニズムによるものです。同じメソッド内で状態を設定して再度呼び出すと、状態は時間内に更新されませんが、次回メソッドが呼び出されたときに更新されます。

関連する推奨事項: 反応ビデオ チュートリアル

以上がReact でのクリックの繰り返しを避ける方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。