Database 发送对API的引用并重定向

我需要你的帮助来指引我一点。 我的目标是扫描产品，然后检索扫描的条形码，以便使用我的API使用以下功能对其进行管理：

export async function getProductByRef(reference) {
  const abortController = new AbortController();

  let user_id = await retrieveProfileUserId();
  let lang = await retrieveAppLang();
  let access_token = await renewAccessToken();
  let result = {};

  if (parseInt(reference) > 0 && access_token != '' && parseInt(user_id) > 0) {
    try {
      let response = await fetch(
          API_URL +
          "/products/" + reference +
          "?user_id=" + user_id +
          "&society_id=" + API_SOCIETYID +
          "&access_token=" + access_token +
          "&lang=" + lang,
        {
          method: "GET",
          signal: abortController.signal,
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            Authorization: "Bearer " + API_SECRETKEY,
            "Cache-Control": "no-cache, no-store, must-revalidate",
            Pragma: "no-cache",
            Expires: "0"
          }
        }
      )
      .then(response => response.json())
      .then(responseData => {
        if (responseData.status == 200 && responseData.data) {
          console.log("getProductByRef()::success", responseData.data);
          result = responseData.data;
        } else if (
          responseData.status >= 200 && responseData.status <= 404 &&
          responseData.data.error && responseData.data.error.length >= 3
        ) {
          // Handle error
          throw responseData.data.error;
        } else {
          throw "error";
        }
      });
    } catch (error) {
      //console.log(error);
     abortController.abort();
    }
  }
  return await result;
}

我不知道如何将其集成到我的产品扫描页面中。你能帮我一下吗，或者给我一点指导，这样我就可以构建我的代码了，我觉得有点迷茫。 我试着这样做，但一点也不确定……：'(

类扫描扩展组件{
建造师（道具）{
超级（道具）；
此.state={
新闻界：错，
hasCameraPermission:null，
引用：“”，
displayArray:[]
};
}
initListData=async（）=>{
let list=等待获取产品（1）；
如果（列表）{
这是我的国家({
displayArray:list，
});      
}
};
异步不安全组件willmount（）{
this.initListData（）；
if（parseInt（this.state.reference）>0）{
让product_data=wait getProductByRef（this.state.reference）；
console.log（this.state.reference）；
如果（product_data&&product_data.reference_id&&parseInt（product_data.reference_id）>0）{
this.props.navigation.navigate（'ProductDetails'，{reference:parseInt（this.state.displayArray.reference）}）
}否则{
this.props.navigation.goBack（）；
}
}否则{
this.props.navigation.goBack（）；
}
};
componentDidMount（）{
this.getPermissionsAsync（）；
}
getPermissionsAsync=async（）=>{
const{status}=wait Permissions.askAsync（Permissions.CAMERA）；
this.setState（{hasCameraPermission:status==“grated”}）；
};
_onPress_扫描=（）=>{
这是我的国家({
新闻界：是的
});
}
把手代码=（{type，data}）=>{
this.setState（{Press:false，scanned:true，lastScannedUrl:data}）；
};
renderBarcodeReader=（）=>{
const{hasCameraPermission，scanned}=this.state；
if（hasCameraPermission===null）{
返回{i18n.t（“scan.request”）}；
}
if（hasCameraPermission===false）{
返回{i18n.t（“scan.noaccess”）}；
}
返回(
{scanned&&(
this.setState（{scanned:false}）
/>
)}
this.props.navigation.navigate（'ProductDetails'，{reference:parseInt（this.state.displayArray.reference）}>{i18n.t（“scan.details”）}
);
}
render（）{
const{hasCameraPermission，scanned，Press}=this.state；
设marker=null；
console.log（'displayArray'，this.state.displayArray'，reference'，this.state.displayArray.reference）
返回(
{媒体(
{this.renderBarcodeReader（）}
) : (
扫描条码
)}
);
}
}
导出默认扫描；

   onPress={() => this.props.navigation.navigate('ProductDetails', {productRef: parseInt(ref)})}>

class Scan extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Press: false,
      hasCameraPermission: null,
      reference: '',
      displayArray: []
    };
  }

   initListData = async () => {
    let list = await getProducts(1);
   
    if (list) {
      this.setState({
        displayArray: list,
      });      
    }
  };

  async UNSAFE_componentWillMount() {
    this.initListData();

        if (parseInt(this.state.reference) > 0) {
      
      let product_data = await getProductByRef(this.state.reference);
      console.log(this.state.reference);
        if (product_data && product_data.reference_id && parseInt(product_data.reference_id) > 0) {                
          this.props.navigation.navigate('ProductDetails', {reference : parseInt(this.state.displayArray.reference)})
        } else {
        this.props.navigation.goBack();
      }
    } else {
      this.props.navigation.goBack();
  }
};

  componentDidMount() {
    this.getPermissionsAsync(); 
  }

  getPermissionsAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === "granted" });
  };

  _onPress_Scan = () => {
    this.setState({
      Press: true
    });
  }

  handleBarCodeScanned = ({ type, data }) => {
    this.setState({ Press: false, scanned: true, lastScannedUrl: data });
  };

  renderBarcodeReader = () => {
    const { hasCameraPermission, scanned } = this.state;

    if (hasCameraPermission === null) {
      return <Text>{i18n.t("scan.request")}</Text>;
    }
    if (hasCameraPermission === false) {
      return <Text>{i18n.t("scan.noaccess")}</Text>;
    }
    return (
      <View
        style={{
          flex: 1,
          flexDirection: "column",
          justifyContent: "flex-end",
        }}
      >
        <BarCodeScanner
          onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
          style={{ flex:1, ...StyleSheet.absoluteFillObject}}
        />
        {scanned && (
          <Button
            title={"Tap to Scan Again"}
            onPress={() => this.setState({ scanned: false })}
          />
        )}
        <Button 
        color="#F78400" 
        title= {i18n.t("scan.details")}  
        onPress={() => this.props.navigation.navigate('ProductDetails', {reference : parseInt(this.state.displayArray.reference)})}>{i18n.t("scan.details")}              
      </Button>     
      </View>
    );
  }
  
  render() {
    const { hasCameraPermission, scanned, Press } = this.state;
    let marker = null;

  console.log('displayArray', this.state.displayArray, 'reference', this.state.displayArray.reference)
    return (
      <View style={{flex:1}}>
        <KeyboardAvoidingView behavior="padding" enabled style={{flex:1}}> 
          <ScrollView contentContainerStyle={{flexGrow: 1}} >
            {Press ? (
              <View style={{flex:1}}>
                {this.renderBarcodeReader()}
              </View>
            ) : (
                <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
               <TouchableOpacity
              onPress={this._onPress_Scan}
              activeOpacity={3}
            >
              <Text style={styles.viewDetails}>Scan BarCode</Text>
            </TouchableOpacity>
             </View>
            )}
          </ScrollView>
        </KeyboardAvoidingView>
      </View>
    );
  }
}
export default Scan;