0

当应用程序午餐时，componentDidMount 被调用，然后 NetInfo.addEventListener 被调用两次。是否有任何解决方案。我的代码是：

class OfflineMessage extends PureComponent {

    state = {
      isConnected: true
    };

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

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

handleConnection = (isConnected) => {
  console.log('status-----', isConnected);
  this.setState({ isConnected });
};
4

2 回答 2

0

根据 github 问题页面，这是预期的行为。您不应该对何时或多久调用一次 listen 做出任何假设，并且应该预期平台之间的差异。这是因为每个平台处理网络的方式不同，我们反映了这一点，而不是试图让一切都 100% 相同。

这可能是因为其他值isConnected正在改变，例如网络类型。每当系统提供一些新的网络信息并将其传递给您时，我们都会触发该事件。

如果您不想在信息相同时重新渲染，这取决于您componentShouldUpdate在 Redux 之类的东西中使用或管理状态来实现。该库将在获取和更新时更新您，您不应假设它提供这些信息的频率或时间。

参考

参考

于 2020-03-06T09:02:42.137 回答
0

我更正了我的代码，现在甚至 componentDidMount 调用了两次，如果连接状态发生变化，那么它只会打印控制台。以前，每当连接状态发生变化时，它都会打印 true、true、false、false。

class OfflineMessage extends PureComponent {

    state = {
      status: true
    };

  componentDidMount() {
    NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectionChange);
  }

  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectionChange);
  }

  handleConnectionChange = (isConnected) => {
    const { status } = this.state;
    if (isConnected != status) {
      console.log("connection changes");
      NetInfo.isConnected.removeEventListener('connectionChange');
    } else {
      NetInfo.isConnected.removeEventListener('connectionChange');
    }
  }
于 2020-03-06T13:16:07.607 回答