Отправка нескольких повторных запросов PUT - PullRequest
Новая
       9

Отправка нескольких повторных запросов PUT

0 голосов
/ 24 августа 2018

часть этого приложения, над которым я работаю для класса, должна сканировать штрих-код книги (используя компонент expo XDE barcodescanner) и затем отправлять отсканированный штрих-код в базу данных, которую обрабатывает другая группа в моем классе.Моя проблема сейчас заключается в том, что каждый раз, когда я делаю сканирование, я вижу в своей консоли, что я отправляю несколько повторяющихся запросов PUT.Я думаю, что проблема в том, что expo barcodescanner не просто сканирует один раз, а затем останавливается, но продолжает сканирование, и каждый раз, когда он сканирует, мое состояние «обновляется», и компонент перерисовывается.Кто-нибудь есть какие-либо предложения о том, как я могу изменить свой код, чтобы убедиться, что я не повторяю рендеринг снова и снова с одними и теми же данными?Я включил соответствующий код ниже.Примечание: некоторые данные жестко запрограммированы для целей тестирования.Спасибо! 

class SecondScreen extends Component {

  constructor(props) {
    super(props);

    this.state= {
        results: []
    }
    this.fetchData = this.fetchData.bind(this);

  }

  fetchData(URL) {
    return fetch(URL)
      .then((response) => response.json())
      .then((responseData) => {
        return responseData 
      })
      .catch((error) => {
        console.error(error)
      })
  }


_handleBarCodeRead = data => {
    let isbn = data.data; 
    let URL = 'https://www.googleapis.com/books/v1/volumes?q=isbn:' + 
    isbn;


    this.fetchData(URL).then(bookResult => {

      this.setState({ results: bookResult }

      fetch('https://p0kvnd5htd.execute-api.us-east- 
           2.amazonaws.com/test/return', {
      method: 'PUT',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({

        'libraryName': 'lib1', //libName
        'bookBarcode': '18263' //isbn
      }),
    })

      .then((response) => {
        if (response.status == 400) {
          console.log(response.status)

          alert('Return unsuccessful, please try again.');
        }
        else {
          console.log(response.status)
          this.props.navigation.navigate('ThirdPage', { title: 
          this.state.results.items[0].volumeInfo.title });
        }
      })
    })
  }

  render() {
    return (
      <BarCodeScanner
        onBarCodeRead={this._handleBarCodeRead}
        style={[StyleSheet.absoluteFill, styles.container]}
      >
        <View style={styles.layerTop} />
        <View style={styles.layerCenter}>
          <View style={styles.layerLeft} />
          <View style={styles.focused} />
          <View style={styles.layerRight} />
        </View>
        <View style={styles.layerBottom} />
      </BarCodeScanner>
    );
  }
}

1 Ответ

0 голосов
/ 24 августа 2018

Легким решением было бы использование функции debounce от lodash:

командная строка: npm i lodash

вершина JavaScript: 

import _ from 'lodash'

Оберните _handleBarCodeRead в debounce, это предотвратит многократный вызов _handleBarCodeRead в течение 3 секунд после последнего вызова: 

_debouncedHandleBarCodeRead = _.debounce((data) =>{ this._handleBarCodeRead(data) }, 3000, {leading: true, trailing: false});

измените BarCodeScanner на использованный метод: 

<BarCodeScanner onBarCodeRead={this._debouncedHandleBarCodeRead} >
...