pubnub listeners not working in react-native

问题

I am working on realtime geolocation-tracking app using pubnub and react-native-maps in react-native. pubnub.publish() is working when called inside Geolocation.getCurrentLocation() and Geolocation.watchPosition() inside componentDidMount().

Here is the code which is worlking fine:

      Geolocation.getCurrentPosition(
        position => {
          if (this.state.allowsGPS) {
            this.pubnub.publish({
              message: {
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                from: '1'
              },
              channel: "location_tracker_channel"
            }, () => console.log("publish 1"))
            let users = this.state.users;
            let tempUser = {
              uuid: this.pubnub.getUUID(),
              latitude: position.coords.latitude,
              longitude: position.coords.longitude
            }
            users.set(tempUser.uuid, tempUser)
            this.setState({
              users,
              currentLocation: position.coords
            })
          }
        },
        error => console.log("error in currentPos:", error),
        {
          enableHighAccuracy: true,
          distanceFilter: 0.1
        }
      )

      Geolocation.watchPosition(
        position => {
          this.setState({
            currentLocation: position.coords
          })
          if (this.state.allowsGPS) {
            console.log("published:", position.coords)
            this.pubnub.publish({
              message: {
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                from: '2'
              },
              channel: "location-tracker-channel"
            }, () => console.log("publish 2"))
          }
        },
        err => console.log("err in geolocation:", err),
        {
          enableHighAccuracy: true,
          distanceFilter: 0.1
        }
      )
    } else {
      console.log("location permission denied")
    }
  }

But its not working in componentDidUpdate() which is supposed to publish {hideUser:true} when this.state.allowsGPS is true and publish users info when its false. Although in logs its printing publish 4 and publish 3, respectively, but its not listening to any such messages.

Here is the code not working:

 componentDidUpdate(prevProps, prevState) {
    if (prevState.allowsGPS != this.state.allowsGPS) {
      if (this.state.allowsGPS) {
        let users = this.state.users;
        let tempUser = {
          uuid: this.pubnub.getUUID(),
          latitude: this.state.currentLocation.latitude,
          longitude: this.state.currentLocation.longitude,
          image: this.state.currentPicture,
          username: this.state.username,
          from: '3'
        }
        users.set(tempUser.uuid, tempUser);
        this.pubnub.publish({
          message: tempUser,
          channel: "location_tracker_channel",
        }, () => console.log("publish 3"))
        this.setState({
          users
        })
      }
      else {
        let users = this.state.users;
        let uuid = this.pubnub.getUUID();

        users.delete(uuid);
        let tempMssg = { hideUser: true, from: '4' }
        this.pubnub.publish({
          message: tempMssg,
          channel: "location_tracker_channel",
        }, () => console.log("publish 4"))

        this.setState({
          users
        })
      }
    }
  }

Here is my full code:

async componentDidMount() {
    this.setUpApp();
  }

  async setUpApp() {
    this.pubnub.addListener({
      message: mssg => {
        let users = this.state.users;
        if (mssg.message.hideUser) {
          users.delete(mssg.publisher);
          this.setState({
            users
          })
        } else {
          let oldUser = this.state.users.get(mssg.publisher);
          let newUser = {
            uuid: mssg.publisher,
            latitude: mssg.message.latitude,
            longitude: mssg.message.longitude
          }
          if (mssg.message.message) {
            setTimeout(mssg.publisher, this.clearMessage, 5000, mssg.publisher);
            newUser.message = mssg.message.message
          } else if (oldUser) {
            newUser.message = oldUser.message
          }
          users.set(newUser.uuid, newUser);
          this.setState({
            users
          })
        }
      }
    })
    this.pubnub.subscribe({
      channels: ["location-tracker-channel"],
      withPresence: true
    })

    let granted;
    if (Platform.OS == "android") {
      granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: 'Location Permissions',
          message: 'LocationTracker needs to access your location',
          buttonNegative: 'NO',
          buttonPositive: 'YES'
        }
      )
    }
    if (granted == PermissionsAndroid.RESULTS.GRANTED || Platform.OS == 'ios') {
      Geolocation.getCurrentPosition(
        position => {
          if (this.state.allowsGPS) {
            this.pubnub.publish({
              message: {
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                from: '2'
              },
              channel: "location_tracker_channel"
            }, () => console.log("publish 1"))
            let users = this.state.users;
            let tempUser = {
              uuid: this.pubnub.getUUID(),
              latitude: position.coords.latitude,
              longitude: position.coords.longitude
            }
            users.set(tempUser.uuid, tempUser)
            this.setState({
              users,
              currentLocation: position.coords
            })
          }
        },
        error => console.log("error in currentPos:", error),
        {
          enableHighAccuracy: true,
          distanceFilter: 0.1
        }
      )

      Geolocation.watchPosition(
        position => {
          this.setState({
            currentLocation: position.coords
          })
          if (this.state.allowsGPS) {
            console.log("published:", position.coords)
            this.pubnub.publish({
              message: {
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                from: '2'
              },
              channel: "location-tracker-channel"
            }, () => console.log("publish 2"))
          }
        },
        err => console.log("err in geolocation:", err),
        {
          enableHighAccuracy: true,
          distanceFilter: 0.1
        }
      )
    } else {
      console.log("location permission denied")
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.allowsGPS != this.state.allowsGPS) {
      if (this.state.allowsGPS) {
        let users = this.state.users;
        let tempUser = {
          uuid: this.pubnub.getUUID(),
          latitude: this.state.currentLocation.latitude,
          longitude: this.state.currentLocation.longitude,
          image: this.state.currentPicture,
          username: this.state.username,
          from: '3'
        }
        users.set(tempUser.uuid, tempUser);
        this.pubnub.publish({
          message: tempUser,
          channel: "location_tracker_channel",
        }, () => console.log("publish 3"))
        this.setState({
          users
        })
      }
      else {
        let users = this.state.users;
        let uuid = this.pubnub.getUUID();

        users.delete(uuid);
        let tempMssg = { hideUser: true, from: '4' }
        this.pubnub.publish({
          message: tempMssg,
          channel: "location_tracker_channel",
        }, () => console.log("publish 4"))

        this.setState({
          users
        })
      }
    }
  }

Libraries used: * pubnub version-4.27.4 * react-native version-'0.62.1' * react-native-maps version='0.27.1'

来源：https://stackoverflow.com/questions/61142691/pubnub-listeners-not-working-in-react-native