React Native Expo中watchPosition无法实现位置变更上报问题咨询

现存问题 #

• setState是异步更新方法，调用后无法立即通过this.state拿到最新值，你当前在设置user_id、经纬度后直接取state值提交，大概率会提交旧数据，甚至user_id会是undefined。
• 配置变量拼写错误：fetch调用里写的是confg.url，缺少字母i，正确拼写应为config.url，拼写错误会导致请求地址异常，无法正常上报。
• 不必要的类型转换：经纬度本身是数字类型，不需要额外用JSON.stringify转成字符串后再存state，后续提交时JSON.stringify会自动处理数值类型。
• 缺少异常捕获：fetch请求没有添加catch分支，请求失败时无法捕获报错信息，不利于排查问题。
• 前置权限校验缺失：调用watchPosition前需要先确认应用已经获取到定位权限，未授权的情况下定位接口会直接抛出错误。

修复后代码 #

try {
  // 直接存user_id变量，不要依赖setState的异步更新
  const user_id = await AsyncStorage.getItem('user_id');
  this.setState({ 
    user_id: user_id,
  });

  navigator.geolocation.watchPosition(
    position => {
      // 直接取原始经纬度数值，不做多余转换
      const lat = position.coords.latitude;
      const long = position.coords.longitude;
      // 先更新state
      this.setState({ lat, long });
      // 直接用上面拿到的lat、long和user_id变量提交，不要读state
      fetch(config.url + 'guardaralerta', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          user_id: user_id,
          lat: lat,
          long: long,
        })
      }).then((response) => response.json())
      .then((responseData) => {
          console.log('上报结果：', JSON.stringify(responseData))  
      }).catch((fetchErr) => {
          // 捕获请求异常
          console.error('上报请求失败：', fetchErr)
      })
    },
    error => {
      console.error('定位失败：', error)
      Alert.alert(error.message)
    },
    { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
  );
} catch (error) {
  console.log('全局异常：', error)    
}

额外注意事项 #

• 上线前请确认安卓端已添加ACCESS_FINE_LOCATION、ACCESS_COARSE_LOCATION权限，iOS端已在Info.plist中添加定位权限描述。
• 如果是网页端场景，需要在HTTPS协议下才能调用定位接口，HTTP环境下浏览器会禁止定位功能。

内容的提问来源于stack exchange，提问作者simon fuentes barboza