React Native动态API网址

Question

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

Api.js

import React, { Component } from 'react';
import ScanditSDK from './components/ScanditSDK'

export default class Api extends Component{
  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(
   <ScanditSDK 
   upc={this.upc}
   getUPCfromApi={this.getUPCfromApi}
   />
   ) 
  }
}

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

ScanditSDK.js

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

Answer 1

尝试将onScan(session) {...}更改为onScan = (session) => {...}

Answer 2

要解决这样的问题，我建议您使用一种方法在API URL中动态添加条形码，然后调用该函数并将其值赋给变量，这就是您在fetch中调用的内容。 / p>

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

  return apiUrl;
}