реагировать на собственный вызов setState внутри ошибки componentDidUpdate

Question

У меня есть многоэкранное приложение, использующее реагирующую навигацию и передающее реквизит с CameraScreen на HomeScreen, которое называется «штрих-код», например:

takePicture() {
        //Redirect 
        this.props.navigation.navigate('Home', {barcode: true});
    }

Источник: https://reactnavigation.org/docs/en/params.html

На домуЯ слушаю обновление реквизита в componentDidMount, и если штрих-код имеет значение true, setState для рендеринга нового компонента, например, так:

 componentDidUpdate(){
    if(this.props.navigation.getParam('barcode') === true) {
      this.setState({
        barcodeActive: true
      })
    }
  }

Я получаю ошибку Invariant Violation: Maximum update depth exceeded - при вызове setState в componentDidMount. Я понимаю, что он находится в бесконечном цикле без перерыва.

Как я могу прослушивать, когда эта опора передается в setState или есть лучший способ добиться того, что мне нужно?

Answer 1

Вы можете использовать prevProps аргумент, а затем сравнить текущие и предыдущие значения barcode. Если они не совпадают, вы можете обновить свое состояние.

 componentDidUpdate(prevProps){
    if(this.props.navigation.getParam('barcode') !== prevProps.navigation.getParam('barcode')) {

      if( this.props.navigation.getParam('barcode')) {
        this.setState({
          barcodeActive: true
        })
       }

    }
  }