Question

我正在创建的应用程序有问题。这里的目标只是打开相机，扫描食品（条形码捕获），并使用API显示产品。

这有效，但是当使用相机扫描产品时，搜索组件将无限期呈现自身，直到从相机组件接收到新条形码为止

这是2个代码

class Search extends React.Component
{
    //On définit les propriétés dans le constructeur du component
    constructor(props) {
        super(props)

        this.state = {
            food:[],
            showButtonAdd: false
        }

        this.searchedText="";
    }

    _loadFood() {
        getFoodFromApi(this.searchedText).then(data => {
            if(data.status === 1 && !isNaN(this.searchedText)) {
               this.setState({
                    food: data.product,
                    showButtonAdd: false 
                })
            }
            else {
                Toast.show("Le code barre ne renvoie vers aucun produit");
                this.setState({
                    showButtonAdd: true,
                    food: []
                })
            }
        })
    }

    _searchTextInputChanged(text) {
        this.searchedText = text;
    }

    render() {

        const { navigation } = this.props;
        const textScan = navigation.getParam("textScan","Default");
        console.log(textScan);

        if(textScan != "Default") {
            this.searchedText = textScan;
            this._loadFood();
        }

        return(
            <View style={styles.mainContainer}>
                <TextInput style={styles.textInput} placeholder="Insere the food's barcode" 
                    onChangeText={(text)=>this._searchTextInputChanged(text)}>
                </TextInput>

                <Button style={{height: 100}} title="Search" onPress={()=>{this._loadFood()}} ></Button>
                <Button style={{height: 400}} title="Ouvrir la caméra" onPress={() => {this.props.navigation.navigate("Camera")}}></Button>

                {
                   this.state.showButtonAdd ? 
                    <Button 
                        style={{height: 400}} 
                        title="Ajouter dans la base de données" 
                        onPress={() => {this.props.navigation.navigate("AddFoodItem")}}>
                    </Button> 
                : null}

                <FoodItem food={this.state.food}/>         
            </View>
        )
    }
}

export default class Camera extends React.Component {

  constructor(props) {
      super(props)
      this.isBarCodeRead = false
  }

  onBarCodeRead = (scan) => {
    console.log('je scan');
    if(!this.isBarCodeRead) {
      this.isBarCodeRead = true;
      this.props.navigation.navigate("Search", {textScan: scan.data})
    }
  }


  render() {
    return (
      <RNCamera
        onBarCodeRead={this.onBarCodeRead}
        style={[StyleSheet.absoluteFill, styles.container]}
        captureAudio={false}
      >
        <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} />
      </RNCamera>
    );
  }
}

找到产品后，条形码将在控制台（textScan）中循环显示，而找不到时，将无限显示Toast。

当我直接将条形码输入TextInput并单击按钮以搜索产品时，我没有此问题，并且显示良好。但是，使用相机存在此问题，如果在用相机无限渲染后尝试在textinput中使用手动搜索，则不会显示搜索到的产品。

我不知道问题到底出在哪里。

预先感谢您的帮助！

无限组件渲染

0 个答案: