Javascript 反应本机动态API url

我正在开发一个应用程序，它应该扫描条形码并将upc条形码插入api url，这样我就可以获得有关产品的信息。我可以检索upc条形码，但我一直坚持将条形码插入api url。

Api.js

import React，{Component}来自'React'；
从“./components/ScanditSDK”导入ScanditSDK
导出默认类Api扩展组件{
getUPCfromApi=（upc）=>{
试一试{
let response=fetch(
'https://api.upcdatabase.org/product/“+upc+”/API_KEY”）；
让responseJson=response.json（）；
返回响应；
console.log（'response'，responseJson）；
}捕获（错误）{
控制台错误（error）；
}
}
render（）{
返回(
) 
}
}

js包含扫描仪模块。在onScan方法中，我调用了getUpcFromApi（upc），这是我在Api.js中创建的

ScanditSDK.js

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
findNodeHandle，
看法
}从“反应本机”；
进口{
条形码选择器，
斯堪的纳维亚模块，
扫描会议，
条形码，
符号设置，
扫描设置
}从"反本土丑闻",；
从“../Api”导入Api；
ScanditModule.setAppKey（'APIKEY'）；
导出类ScanditSDK扩展组件{
建造师（道具）{
超级（道具）
此.state={
upc:“”，
}
}
组件willmount（）{
this.settings=新的扫描设置（）；
this.settings.setSymbologyEnabled（Barcode.Symbology.EAN13，true）；
this.settings.setSymbologyEnabled（Barcode.Symbology.EAN8，true）；
this.settings.setSymbologyEnabled（Barcode.Symbology.UPCA，true）；
this.settings.setSymbologyEnabled（Barcode.Symbology.UPCE，true）；
this.settings.setSymbologyEnabled（Barcode.Symbology.CODE39，true）；
this.settings.setSymbologyEnabled（Barcode.Symbology.ITF，true）；
this.settings.setSymbologyEnabled（Barcode.Symbology.QR，true）；
this.settings.setSymbologyEnabled（Barcode.Symbology.DATA_MATRIX，true）；
this.settings.setSymbologyEnabled（Barcode.Symbology.CODE128，true）；
//this.settings.setSymbologyEnabled（Barcode.Symbology.MICROQR，true）；
/*某些1d条形码符号允许您对可变长度数据进行编码
Scandit条形码扫描仪SDK仅扫描特定长度范围内的条形码。如果
应用程序需要扫描其中一个符号，并且长度正在下降
在默认范围之外，您可能需要为此调整“活动符号计数”
符号学。下面几行代码显示了这一点*/
this.settings.getSymbologySettings（Barcode.Symbology.CODE39）
.activeSymbolCounts=[7,8,9,10,11,12,13,14,15,16,17,18,19,20]；
/*有关默认值以及如何计算每个符号的符号计数的详细信息，请参阅
看http://docs.scandit.com/stable/c_api/symbologies.html. */
}
componentDidMount（）{
这个.scanner.startScanning（）；
}
getUPCfromApi=（upc）=>{
试一试{
let response=fetch(
'https://api.upcdatabase.org/product/“+upc+”/API_KEY”）；
让responseJson=response.json（）；
返回响应；
console.log（'response'，responseJson）；
}捕获（错误）{
控制台错误（error）；
}
}
render（）{
返回(
{this.onScan（会话）}
scanSettings={this.settings}
ref={（扫描）=>{this.scanner=scan}
style={{flex:1}}/>
);
}
onScan（会话）{
this.setState（{upc:session.newlyRecognizedCodes[0].data}）
警报（session.newlyRecognizedCodes[0]。数据+“”+session.newlyRecognizedCodes[0]。符号）；
this.getUPCfromApi（this.state.upc）
}
}

尝试将

onScan（session）{…}

更改为

onScan=（session）=>{…}

要解决这样的问题，我建议您使用一种方法，在API URL中动态添加条形码，然后调用函数并将其值分配给变量，这就是您将在获取中调用的

function generateAPiUrl(barcode) {
    const apiUrl = 
`https://api.upcdatabase.org/product/${upc}/${API_KEY}`

  return apiUrl;
}

---

Scanner.js应命名为ScanditSDK.js，但它在onScan函数中执行“this.getUPCfromApi（this.state.upc）不是函数”

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  findNodeHandle,
  View
} from 'react-native';
import {
  BarcodePicker,
  ScanditModule,
  ScanSession,
  Barcode,
  SymbologySettings,
  ScanSettings
} from 'react-native-scandit';

import Api from '../Api';
ScanditModule.setAppKey('APIKEY');



export class ScanditSDK extends Component {
  constructor(props){
    super(props)
    this.state = {
      upc: '',
    }
  }

  componentWillMount() {
    this.settings = new ScanSettings();
    this.settings.setSymbologyEnabled(Barcode.Symbology.EAN13, true);
    this.settings.setSymbologyEnabled(Barcode.Symbology.EAN8, true);
    this.settings.setSymbologyEnabled(Barcode.Symbology.UPCA, true);
    this.settings.setSymbologyEnabled(Barcode.Symbology.UPCE, true);
    this.settings.setSymbologyEnabled(Barcode.Symbology.CODE39, true);
    this.settings.setSymbologyEnabled(Barcode.Symbology.ITF, true);
    this.settings.setSymbologyEnabled(Barcode.Symbology.QR, true);
    this.settings.setSymbologyEnabled(Barcode.Symbology.DATA_MATRIX, true);
    this.settings.setSymbologyEnabled(Barcode.Symbology.CODE128, true);
   // this.settings.setSymbologyEnabled(Barcode.Symbology.MICROQR, true);

    /* Some 1d barcode symbologies allow you to encode variable-length data. By default, the
       Scandit BarcodeScanner SDK only scans barcodes in a certain length range. If your
       application requires scanning of one of these symbologies, and the length is falling
       outside the default range, you may need to adjust the "active symbol counts" for this
       symbology. This is shown in the following few lines of code. */
    this.settings.getSymbologySettings(Barcode.Symbology.CODE39)
      .activeSymbolCounts = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
    /* For details on defaults and how to calculate the symbol counts for each symbology, take
       a look at http://docs.scandit.com/stable/c_api/symbologies.html. */
  }

  componentDidMount() {
    this.scanner.startScanning();
  }

  getUPCfromApi = (upc) => {
    try {
      let response = fetch(
        'https://api.upcdatabase.org/product/'+ upc + '/API_KEY');
      let responseJson = response.json();
      return responseJson;
      console.log('response',responseJson);
    } catch (error) {
      console.error(error);
    }
  }

  render() {
    return (
      <View style={{
            flex: 1,
            flexDirection: 'column'}}>
            <BarcodePicker
                onScan={(session) => { this.onScan(session) }}
                scanSettings= { this.settings }
        ref={(scan) => { this.scanner = scan }}
                style={{ flex: 1 }}/>
    </View>
    );
  }

  onScan(session) {
    this.setState({upc:session.newlyRecognizedCodes[0].data })
    alert(session.newlyRecognizedCodes[0].data + " " + session.newlyRecognizedCodes[0].symbology);
    this.getUPCfromApi(this.state.upc)
  }
}

function generateAPiUrl(barcode) {
    const apiUrl = 
`https://api.upcdatabase.org/product/${upc}/${API_KEY}`

  return apiUrl;
}