Бесконечный рендеринг компонентов - PullRequest
Новая
       22

Бесконечный рендеринг компонентов

0 голосов
/ 05 марта 2019

У меня проблема с приложением, которое я создаю.Цель здесь - просто открыть камеру, отсканировать пищевой продукт (захват штрих-кода) и отобразить продукт с помощью 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), а когда он не найден, тост отображается бесконечно.

Когда я непосредственно ввожу штрих-код в TextInput и нажимаю кнопку для поиска продукта, у меня нет этой проблемы, и она хорошо отображается.Однако с камерой у меня возникает эта проблема, и если я пытаюсь использовать ручной поиск с вводом текста после бесконечного рендеринга с помощью камеры, искомый продукт не отображается.

Я не знаю точно, откуда возникла проблема.

Заранее благодарю за помощь!

...