Question

我正在构建一个React Native应用程序，但我仍然有2个屏幕 1.进入手机 2.验证Otp

EnterUserInfo.js

class UserInfoInput extends Component {
    constructor(props) {
    super(props);

    this.state = { formValid:true,
                   validMobileNumber:false,
                   .
                   .}}


   componentWillReceiveProps(nextProps) {
     if(nextProps.common.isFetching===false) {
         this.props.navigation.navigate('VerifyOtpScreen')
         .
         .
       } else {
       this.setState({isLoading:true})
          }} 

  onPressNext=()=> {
         this.props.sendOtp(payload)}

  render() {
    return (<View/>) 
   }
   }


 }
function mapStateToProps(state) {
 return {
    common: state.common
      }
}

function mapDispatchToProps(dispatch) {
  return {
  ...bindActionCreators({ sendOtp }, dispatch)
   }
 }

export default connect(mapStateToProps,mapDispatchToProps)(UserInfoInput);

在此用户输入电话号码，并触发一个动作sendOtp，响应将在化简器中，并将在组件willreceveprops（）生命周期中提供。

VerifyOtp.js

class VerifyOtp extends Component {

  constructor(props) {
        super(props);
        this.state = { oneTimePIN: '' ,
                      .};
      }

  componentDidMount(){
         this.setState({ phoneNumber:this.props.common.phone});
       }

   componentWillMount() {
      setTimeout(() => {
        this.setState({ isResendDisabled: false, opacity: 1 });
      }, 30000);
    }

  componentWillReceiveProps(nextProps){
  //do operation 
  }

    onPressNext=()=>{
      if(this.state.oneTimePIN=='') {
      this.setState({showNotification:true})
      } 
      else {
        this.onSubmit()
      }
    }

  onSubmit=()=>{
       this.props.verifyOtp(payload) 

     }
 onResendOtp=()=>{

      this.props.sendOtp(payload,locationData) 

      this.setState({ isResendDisabled: true, opacity: 0.5 });
      setTimeout(() => {
        this.setState({ isResendDisabled: false, opacity: 1 });
      }, 30000);

    }

   render() {
        return (<View><Elements></View>)
       }

}
 function mapStateToProps(state) {
     return {
          common: state.common
    }
  }
    function mapDispatchToProps(dispatch) {
      return {
          ...bindActionCreators({ verifyOtp,sendOtp }, dispatch)
      }
    }

  export default connect(mapStateToProps,mapDispatchToProps)(VerifyOtp);
 VerifyOtp screen used to verify the otp.

问题是，如果我返回到“用户信息”屏幕并再次移动到verifyOtp屏幕，则收到警告消息

“警告：无法在已卸载的组件上执行React状态更新。这是空操作，但表示您的应用程序内存泄漏警告的原因是什么？如何解决该问题？

Answer 1

当您调用异步函数后接setstate时，会发生这种情况。一个简单的解决方法是这样的：

constructor(props) {
  this.state = {
    ...
    this.isCancelled: false
  }
}

componentWillMount() {
  setTimeout(() => {
    !this.state.isCancelled && this.setState({ isResendDisabled: false, 
      opacity: 1 });
  }, 30000);
}

和componentWillUnmount

中

componentWillUnmount() {
// setting it true to avoid setState waring since componentWillMount is async
this.state.isCancelled = true;
}

警告：无法在已卸载的组件上执行React状态更新。这是空操作，但表示您的应用程序中发生内存泄漏

1 个答案: