React Native在按钮上放了一个“ Cooldown”

如何解决React Native在按钮上放了一个“ Cooldown”

我的问题是，是否可以对用户按下的按钮进行冷却，或者仅在2秒钟之内注册一次。我正在使用与REST API和PostgreSQL DB连接的React Native（Expo）。

我的问题是我有一个将数据发送到数据库的按钮。 OnPress输入的值已被存入数据库，并且用户被导航到另一个屏幕，他可以在其中查看其输入。

我注意到，当用户足够快时，他可以按两次或3次该按钮，因此数据也将2/3次发布到数据库。

我需要大约一秒钟的冷却时间，因此数据仅发布1次，因为导航几乎立即发生！

我在互联网上找不到任何东西。

感谢〜褪色

解决方法

到目前为止，我可以想到2种解决方案，也许还有许多其他解决方案。

解决方案1： 如果已经完成数据库调用，则有一些可以保留值的变量，一旦从数据库获得响应，就可以重置该变量，然后用户可以再次按下该按钮。

类似

onPress = {this.state.isPressed ? null : <this.writeTodatabase>}

和

writeTodatabase = () => {
    this.setState({ isPressed:true })
    // code to write to database
    // once you have response from database you can set isPressed to false.
}

如果该变量为true，您也可以禁用按钮。

解决方案2：：您可以使用throttle库中的lodash。

Reference Document

,

按下按钮后立即将其禁用。

const MyComponent = ({makePutCall}) => {
   const [disabled,setDisabled] = useState(false);

   const doPut = async () => {
       setDisabled(true);
       await makePutCall();
       setDisabled(false);
   }

   return <Button disabled={disabled} onPress={doPut}/>
 
}

或使用ref防止多次推送：

const MyComponent = ({makePutCall}) => {
   const disabled = useRef(false);

   const doPut = async () => {
       if(disabled.current) return;
       disabled.current = true;
       await makePutCall();
       disabled.current = false;
   }

   return <Button onPress={doPut}/>
 
}

我最喜欢的人是微调器，就像你说的那样：

const MyComponent = ({makePutCall}) => {
   const [showSpinner,setShowSpinner] = useState(false);

   const handlePress = async () => {
      setShowSpinner(true);
      await makePutCall();
      setShowSpinner(false);
   }

   return showSpinner ? <Spinner/> : <Button onPress={handlePress}/>
}

或以另一种方式执行-请勿使用计时器。

,

尝试使用debounce / throttle。这是去抖动的基本示例。

#import libraries
library(tidyverse)
library(dplyr)
library(rvest)
library(magrittr)

#get URL
url <- "https://spotifycharts.com/regional/nl/daily/"

#combine elements from one page
get_one_page <- function(url) {
  
  #scrape all elements
  html <- read_html(url)
  
  #wait 2 seconds for each request
  Sys.sleep(2)
  
  #get all song positions
  position <- html %>% 
    html_nodes(".chart-table-position") %>%
    html_text()
  
  #get all song names
  songs <- html %>% 
    html_nodes("strong") %>%
    html_text()
  
  #get all artist names
  artists <- html %>%
    html_nodes(".chart-table-track span") %>%
    html_text()
  
  #get all streams
  streams <- html %>%
    html_nodes("td.chart-table-streams") %>%
    html_text()
  
  #get date of chart
  date <- html %>%
    html_nodes(xpath = "/html/body/div/div/div/div/span/div/div/div/div/div[3]/div") %>%
    html_text()
  
  #get region of list
  region <- html %>%
    html_nodes(xpath = "/html/body/div/div/div/div/span/div/div/div/div/div[1]/div") %>%
    html_text()
  
  
  #return table
  url_data <- tibble(position = position,songs = songs,artists = artists,streams = streams,date = date,region = region)
  return(url_data)

}

#scrape multiple pages
scrape_write_table <- function(url) {
  
  list_of_dates <- seq(as.Date("2017-01-01"),as.Date("2020-09-20"),by="days")
  list_of_pages <- str_c(url,list_of_dates)
  
  list_of_pages %>%
    map(get_one_page) %>%
    bind_rows()
}

#create dataframe
spotifycharts_df <- scrape_write_table(url)
view(spotifycharts_df)

#create CSV
#write_csv(spotifycharts_df,"spotifycharts_data.csv")