Блог

мой вопрос в том, можно ли установить время перезарядки на кнопку, которую нажимает пользователь, или регистрировать только 1 нажатие за 2 секунды. Я использую React Native (Expo), связанный с REST API и базой данных PostgreSQL.

Моя проблема в том, что у меня есть кнопка, которая отправляет данные в базу данных. При нажатии введенные значения помещаются в базу данных, и пользователь переходит на другой экран, где он может увидеть свою запись.

Я заметил, что когда пользователь достаточно быстр, он может нажать кнопку дважды или 3 раза, и поэтому данные также отправляются 2/3 раза в БД.

Мне понадобилось бы что-то вроде одной секунды перезарядки, чтобы данные публиковались только 1 раз, потому что навигация почти происходит немедленно!

Я ничего не мог найти в Интернете по этому поводу.

Спасибо ~ Исчезло

Отключите кнопку, как только она нажата.

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

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

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

или используйте ссылку, чтобы предотвратить нажатие более одного раза:

 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}/>
}
  

или сделайте это другим способом — НЕ ИСПОЛЬЗУЙТЕ ТАЙМЕР.

На данный момент я могу придумать 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 библиотеки.

Справочный документ

попробуйте использовать debounce / throttle . вот простой пример debounce.

 Import * as _ from lodash;
...
...

      
onPressDebounced = _.debounce(this.onPressed(),500);

render() { 
  return ( 
    <TouchableHighlight 
      { ...this.props } 
      onPress = { this.onPressDebounced}> 
      {this.props.children} 
    </TouchableHighlight>
  )
}