在计算距离之前等待用户定位 - 重构为异步函数

Posted 2023-05-06

【中文标题】在计算距离之前等待用户定位 - 重构为异步函数

【英文标题】：Await for userlocation before calculating distance - Refactor to async function

【发布时间】：2021-06-17 01:25:50

【问题描述】：

在我的应用中，我需要计算当前用户与事件位置之间的距离。

我在以前的项目中使用过这个功能，这对我很有效，因为用户位置是事先确定的。

现在在我的应用程序中有点不同，因为必须在登录主页后立即过滤事件，其中用户位置仍有待确定。

所以我的代码低于asynchronous 以便在userLat 和userLon 包含这些值之后开始计算

const [userLat, setUserLat] = useState(localStorage.getItem('userLat'))
const [userLon, setUserLon] = useState(localStorage.getItem('userLon'))


useEffect(() => 
    data?.forEach((el) => 
      Geocode.fromAddress(
        `$el.street $el.houseNumber, $el.zip $el.city`
      )
        .then((res) => 
          let dis = getDistance(
            
              latitude: parseFloat(res.results[0].geometry.location.lat),
              longitude: parseFloat(res.results[0].geometry.location.lon),
            ,
            
              latitude: parseFloat(userLat), // Not available right away
              longitude: parseFloat(userLon), // Not available right away
            
          );
          console.log(dis); // this return NaN since userLat & userLon values aren't available yet
        )
        .catch((err) => console.log(err));
    );
  , [data]);

所以geocode function 应该在userLat 和userLon 可用时立即执行。

我尝试了一些方法将其转换为 async function 并尝试将 await 设置为 userLat 和 userLon 值，但没有成功。

有人能指出正确的方向吗？如何将wait 用于Geocode.fromAddress 直到userLat 和userLon 值已由地理定位api 确定？

提前致谢！

【参考方案1】：

虽然您不能 call hooks within conditionals，但您可以在挂钩中包含条件检查！

如果您有需要基于 data、userLat 和 userLon 运行的效果，则将它们作为依赖项包含在您的效果中并包含检查：

const [userLat, setUserLat] = useState(localStorage.getItem('userLat'));
const [userLon, setUserLon] = useState(localStorage.getItem('userLon'));

useEffect(
  () => 
    // Only calculate distance if coords are available
    if (userLat && userLon) 
      data?.forEach((el) => 
        Geocode.fromAddress(`$el.street $el.houseNumber, $el.zip $el.city`)
          .then((res) => 
            let dis = getDistance(
              
                latitude: parseFloat(res.results[0].geometry.location.lat),
                longitude: parseFloat(res.results[0].geometry.location.lon),
              ,
              
                latitude: parseFloat(userLat),
                longitude: parseFloat(userLon),
              
            );

            // Do something with `dis` here...
          )
          .catch((err) => console.log(err));
      );
    
  ,
  // Re-run effect when these variables update
  [data, userLat, userLon]
);

【讨论】：

天啊@romellem，我的愚蠢错误！这是我尝试过但失败的解决方案，原因如下：res.results[0].geometry.location.lon 必须是 res.results[0].geometry.location.lng

但非常感谢您调查并确认这是解决我的问题的正确方法。干杯！