So vermeiden Sie wiederholte Klicks in React

Die Idee, wiederholte Klicks zu verhindern:

Sobald die Datenabfrage gestartet ist, kann der nächste Klick erst am Ende dieser Anfrage erfolgen, andernfalls erfolgt eine entsprechende Aufforderung.

Spezifische Methode: Anfangseinstellungen im

Status:

state={
   bool:true,
}

Click-Ereigniseinstellungen:

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,
		})
	}
}

Analyse:

Wenn bool wahr ist, führen wir die Anfrage aus. Wenn mehrere Klicks auftreten, wird der bool:false gesetzt Zu Beginn wird die Methode wirksam, um zu verhindern, dass die nächste Anfrage gestellt wird. Nachdem die Anfrage abgeschlossen ist, ändern wir den Status von Bool, sodass die nächste Anfrage abgeschlossen werden kann .

Die Tatsache, dass die Methode zu Beginn auf „false“ gesetzt ist und die Anforderung trotzdem ausgeführt wird, liegt an einem asynchronen Mechanismus. Wenn der Status in derselben Methode erneut festgelegt und aufgerufen wird, wird der Status nicht aktualisiert rechtzeitig, wird aber beim nächsten Aufruf der Methode ausgeführt.

Verwandte Empfehlungen:

Video-Tutorial reagieren

Das obige ist der detaillierte Inhalt vonSo vermeiden Sie wiederholte Klicks in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!