javascript - 在 componentDidUpdate 错误中 react native 调用 setState

Question

我有一个使用 react-navigation 的多屏应用程序，并将一个名为“条形码”的 Prop 从 CameraScreen 传递到 HomeScreen，如下所示:

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

来源:https://reactnavigation.org/docs/en/params.html

在主屏幕上，我正在监听 componentDidMount 中的 Prop 更新，如果条形码为真，则设置状态以呈现新组件，如下所示:

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

我收到错误 Invariant Violation: Maximum update depth exceeded - 从调用 componentDidMount 中的 setState。我知道这是一个没有中断的无限循环。

当这个 prop 传递给 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
        })
       }

    }
  }