NetInfo.addEventListener 在 IOS 中挂载的组件中被调用两次

Question

当应用程序启动时，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 });
};

Answer 1

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

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

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

Refer

Answer 2

我更正了我的代码，现在即使 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');
    }
  }

NetInfo.addEventListener 在 IOS 中挂载的组件中被调用两次

NetInfo.addEventListener is called twice in component did mount in IOS

react-native

react-native-community-netinfo