在React Native中更改屏幕时如何删除状态值

Question

我正在制作一个react native android应用程序，其中componentWillUnmount（）不起作用。假设用户在特定屏幕的文本输入中输入文本值并转到下一个屏幕。之后，当用户按下返回按钮时，我想要那个文字输入中要删除的文字值将被删除。我尝试在代码中添加此行。

 componentWillUnmount(){
  this.setState({text:""})
  }

基本上我正在删除我输入到TextInput中的状态值。但这不起作用。在活动指示器的情况下也会发生这种情况。当活动指示器开始获取数据时，首先我要检查是否连接到互联网。如果不是，那么我就无法通过导航导航到任何网络屏幕。但是当我按下“后退”按钮时，活动指示器不会消失吗？那么，在导航到其他屏幕后如何删除组件中所有状态值？

Answer 1

反应导航使您可以添加侦听器，以便跟踪屏幕上正在发生的操作。

您可以添加四个侦听器：

  

  
• willFocus-屏幕将聚焦
  
• didFocus-屏幕聚焦（如果有过渡，则过渡完成）
  
• willBlur-屏幕将无法对焦
  
• didBlur-屏幕未聚焦（如果存在过渡，则过渡完成）
  

https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

这里是调用willBlur的示例，其他示例遵循相同的模式，只是您更改了传递给函数的值。

componentDidMount () {
   this.didBlurSubscription = this.props.navigation.addListener(
   'didBlur',
   payload => {
    // you can perform actions here when the screen `willBlur`
    this.setState({text: ''});
   }
 );
}

componentWillUnmount () {
 // remember to unsubscribe
 if (this.didBlurSubscription) {
   this.didBlurSubscription.remove();
 }
}

您当前的解决方案无法正常工作的原因是未卸下屏幕，它正处于焦点/模糊状态。因此componentWillUnmount将不会被调用。另外，如果要卸载组件，则不应尝试设置setState，因为这是一种反模式，并且可能导致内存泄漏。