基于用户位置的 React Native API 调用

Posted 2023-02-23

【中文标题】基于用户位置的 React Native API 调用

【英文标题】：React Native API Call based on user location

【发布时间】：2021-01-03 18:19:32

【问题描述】：

我刚刚开始使用 react 和 react native 我的目标是获取用户位置，并根据位置坐标进行 API 调用并显示结果。我哪里出错了？我正在使用带有 aqicn API 库的 EXPO 项目。

这里是代码。

import React, useState , useEffect from 'react';
import  StyleSheet, Text, View ,Button from 'react-native';
import * as Location from 'expo-location';
import Constants from 'expo-constants';
import axios from 'axios';
//First get location - Done
//get latitude & longitude - Done
//Call the api with latitude and longitude
//Display results

export default function HomeScreen(navigation) 

  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  //Lat and Long

  const [latitude, setLatitude] = useState(null);
  const [longitude , setLongitude]= useState(null);
  const [data, setData] = useState([]);


  useEffect(() => 
    (
      async () => 
      let  status  = await Location.requestPermissionsAsync();
      if (status !== 'granted') 
        setErrorMsg('Permission Denied');
        return;
      

      let location = await Location.getCurrentPositionAsync();
      setLocation(location);
      //Changes
      setLatitude(location.coords.latitude);
      setLongitude(location.coords.longitude);
            
    )();
  , []);


    
    const la=latitude;
    const lo=longitude;
    
    console.log(la , lo);

    let res = fetch("https://api.waqi.info/feed/geo:"+ la +";"+ lo +"/?token=ac3a71fc80931abd95ede14c2040f0678f578703")
    .then((response) => response.json())
    .then((json) => setData(json.data))
    .catch((error) =>console.log(error))
    
  

     console.log(data);
   

    return (
    <View style=styles.container>
      <Text style=styles.paragraph></Text>
    </View>
  );






   const styles= StyleSheet.create(
     container: 
       padding:20,
       marginTop:15,
       margin:10,

     ,
     paragraph : 
       padding:20,
       marginTop:5,
     


   );

【参考方案1】：

我想我知道你的问题是什么。仅当您填写了纬度和经度状态时，您才必须执行请求。您可以使用钩子 useEffect 确保这一点。你的代码必须是这样的：

 useEffect(() => 
    /** Creating an useEffect like this
you ensure that the latitude and longitude state are filled. Therefore,
your request is going to work :).
**/
    async function anyNameFunction() 
    let res = fetch("https://api.waqi.info/feed/geo:"+ latitude +";"+ longitude +"/?token=ac3a71fc80931abd95ede14c2040f0678f578703")
    .then((response) => response.json())
    .then((json) => setData(json.data))
    .catch((error) =>console.log(error))
     console.log(data);
        
    anyNameFunction();
  , [latitude, longitude]);

如果您还有任何疑问，请随时询问更多:)。等待您的反馈，如果答案正确请点赞！

【讨论】：

先生，它仍然无法正常工作。它给出了错误。无效的地理位置 - 无法解析 'null,null' 无效的地理位置 - 无法解析 'null,null'

还有一件事，先生，我们可以在一个功能组件中使用两个 useEffects 挂钩吗？用于完成两个不同的任务。其实我只是这样做。所以如果错了请纠正我

确定你想要多少个useEffects。就您而言，一种是在您安装组件时获得许可并获得用户位置。我所做的 useEffect 是为了当纬度和经度状态被填满时，您请求 API。您是在 iOS 还是 android 中执行此请求？记住也要在设备中打开位置。等待您的反馈:)。

先生，我在 Android 上做。是的，我确实将位置放在了我的设备上。我正在按照您的指示做同样的事情。仍然有一些错误，但输出是经过一些更改后出现的。我认为需要一些优化。无论如何，非常感谢您抽出宝贵的时间帮助我学习。谢谢你指导我先生..

感谢您的反馈！我总是在这里帮助先生！如果您有更多问题，您可以随时提问:)。