防止重複點擊的想法:
#在請求資料一旦開始,直到本次請求結束前,不能進行下一次點擊,否則給與相應的提示。
具體方法:
state中的初始設定:
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, }) } }
解析:
滿足bool為true的情況,我們執行請求,如果發生多次點擊的情況,方法開頭設定的bool:false就會生效,防止在請求還沒有完成的情況下進行下一次請求;
然後在請求完成之後,我們把Bool的狀態變更多來,以便此次請求完成還可以進行下一次請求。
至於方法開頭設定為false,請求也執行,是源自於一個非同步機制,在同一個方法中設定state又重新調用,state是來不及更新的,但是會在下次呼叫方法的時候執行。
相關推薦:react影片教學
以上是react怎麼避免重複點擊的詳細內容。更多資訊請關注PHP中文網其他相關文章!