0

如果我的应用与互联网断开连接超过 5 分钟，我想清除反应原生应用数据。

我正在使用本机NetInfo来检查网络连接状态。保存应用程序断开连接的时间并检查它何时重新连接到互联网。如果间隔超过 5 分钟，那么我想清除应用程序数据。

我的代码是：

class OfflineMessage extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isConnected: true
    };
  }

  componentDidMount() {
    NetInfo.addEventListener((state) => {
      this.handleConnection(state.isConnected);
    });
  }

  componentWillUnmount() {
    NetInfo.removeEventListener((state) => {
      this.handleConnection(state.isConnected);
    });
  }

handleConnection = (isConnected) => {
  this.setState({ isConnected });

  if(!isConnected){
    this.startTimer();
  } else {
    this.checkElapsed();
  }
};

startTimer = async () => {
  try {
    console.log('Internet disconnected at: ');
    await AsyncStorage.setItem('time', JSON.stringify(Date.now()));

  } catch (error) {
    // console.log('Something went wrong', error);
  }
}

checkElapsed = async () => {
    try {
      let startTime =  await AsyncStorage.getItem('time');

      if(startTime){
        let endTime = Date.now();
        const elapsedTime = Math.floor((endTime -JSON.parse(startTime))/1000);
        if(elapsedTime > 5){
           alert("5 min is completed.");
           // Clear app data
         }
        console.log('Time elapsed'+ elapsedTime);
      }

  } catch (error) {
    // console.log('Something went wrong', error);
  }
}

问题：只要连接状态发生变化，就会调用 startTimer 和 checkElapsed 方法。这段代码有什么问题。

如果我将给定的代码修改为：

    state = {
      isConnected: true
    };

  componentDidMount() {
    this.unsubscribeFromNetInfo = NetInfo.addEventListener((state) => {
          this.handleConnection(state.isConnected);
      });
  }

  componentWillUnmount() {
     this.unsubscribeFromNetInfo();
  }

  handleConnection = (isConnected) => {
    console.log(isConnected);
    this.setState({ isConnected });
};

EventListener 被多次调用且状态频繁变化 true false,true,false 。

4

1 回答 1

1

现在，根据https://github.com/react-native-community/react-native-netinfo#usage ，您正在处理错误的 NetInfo 订阅

你必须这样做：

componentDidMount() {
    this.unsubscribeFromNetInfo = NetInfo.addEventListener(state => {
        this.handleConnection(state.isConnected);
    });
}

componentWillUnmount() {
    this.unsubscribeFromNetInfo();
}

此外，如果您想检查 5分钟，请使用：

if (elapsedTime > 5 * 60)

作为你的转换

Math.floor((endTime - JSON.parse(startTime)) / 1000)

将其转换为秒而不是分钟。

在当前状态下，您的应用程序将触发几乎所有内容，因为代码仅检查 5 秒。

否则，您自己实现的逻辑应该可以正常工作:)

于 2020-03-05T11:21:37.447 回答