Infinite component rendering

Question

I have a problem with the application I am creating. The goal here is simply to open the camera, scan a food product (barcode capture), and display the product using an API.

This works, however when a product is scanned with the camera, the Search component renders itself indefinitely until it receives a new barcode from the Camera component

Here are the 2 codes

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

When the product is found, the barcode is displayed in a loop in the console (textScan) and when it is not found, the Toast is displayed infinitely.

When I directly enter the barcode into the TextInput and click on the button to search for a product, I don't have this problem, and it displays well. However with the camera I have this problem and if I try to use the manual search with textinput after the infinite rendering with the camera, the searched product is not displayed.

I don't know exactly where the problem comes from.

Thank you in advance for your help !

Infinite component rendering

0 Answers0