Javascript 发送多个重复的PUT请求

我正在为班级开发的这个应用程序的一部分应该是扫描一本书的条形码（使用expo XDE条形码扫描仪组件），然后将扫描的条形码发送到我班上另一个小组正在处理的数据库。我现在的问题是，每次扫描时，我都会在控制台中看到我发送了多个重复的PUT请求。我认为问题在于expo条码扫描仪不只是扫描一次然后停止，而是继续扫描，每次扫描时，我的状态都会“更新”，组件会重新呈现。有人对我如何修改代码以确保我不会使用相同的数据一次又一次地重新渲染有什么建议吗？我已经在下面包含了相关代码。注：部分数据为硬编码，用于测试目的。谢谢大家!

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

class SecondScreen扩展组件{
建造师（道具）{
超级（道具）；
此。状态={
结果：[]
}
this.fetchData=this.fetchData.bind（this）；
}
获取数据（URL）{
返回获取（URL）
.then（（response）=>response.json（））
.然后（（响应数据）=>{
返回响应数据
})
.catch（（错误）=>{
控制台错误（错误）
})
}
_handleBarCodeRead=数据=>{
设isbn=data.data；
让URL为空https://www.googleapis.com/books/v1/volumes?q=isbn:' + 
isbn；
this.fetchData（URL）.then（bookResult=>{
this.setState（{results:bookResult}
取（'https://p0kvnd5htd.execute-api.us-east- 
2.amazonaws.com/test/return'{
方法：'放'，
标题：{
接受：'application/json'，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
'libraryName'：'lib1'，//libName
'bookBarcode'：'18263'//isbn
}),
})
。然后（（响应）=>{
如果（response.status==400）{
console.log（response.status）
警报（'返回不成功，请重试'）；
}
否则{
console.log（response.status）
this.props.navigation.navigate（'ThirdPage'，{title:
this.state.results.items[0].volumeInfo.title}）；
}
})
})
}
render（）{
返回(
);
}
}

简单的解决方法是使用lodash的功能：

命令行：

npm i lodash

javascript顶部：

import _ from 'lodash'

将_handleBarCodeRead包裹在去盎司中，这将防止在上次调用后3秒钟内多次调用_handleBarCodeRead：

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

将条形码扫描仪更改为使用去抖动方法：

<BarCodeScanner onBarCodeRead={this._debouncedHandleBarCodeRead} >