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问题页面，这是预期的行为。您不应该对何时以及多长时间调用一次监听进行任何假设，并且应该期望平台之间的差异。这是因为每个平台处理网络的方式都不相同，我们会对此进行镜像，而不是尝试使所有内容都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中安装的组件中被调用了两次

2 个答案: