How to avoid repeated clicks in react

Ideas to prevent repeated clicks:

Once the request for data starts, the next request cannot be made until the end of this request. Click, otherwise the corresponding prompt will be given.

Specific method:

Initial settings in state:

state={
   bool:true,
}

Click event settings:

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

Analysis:

If bool is true, we execute the request. If multiple clicks occur, the bool:false set at the beginning of the method will take effect to prevent the request from being processed before it is completed. One request;

Then after the request is completed, we change the status of Bool so that the next request can be made after this request is completed.

As for the fact that the beginning of the method is set to false and the request is still executed, it is due to an asynchronous mechanism. If the state is set and called again in the same method, the state will not be updated in time, but it will be updated the next time the method is called. implement.

Related recommendations: react video tutorial

The above is the detailed content of How to avoid repeated clicks in react. For more information, please follow other related articles on the PHP Chinese website!