时间戳

首页 > 解决方案 > 在 React/React Native 中完成前一个函数时运行一个函数

javascript - 在 React/React Native 中完成前一个函数时运行一个函数

问题描述

我有 2 个函数，我想一个接一个地运行，但是由于第二个函数从前一个函数中创建的状态中获取信息，我希望它在执行之前等待它完成。

我知道 async/await 可能是最好的，但还没有完全掌握它。

第一个函数本质上是从一组数据中获取最近的位置，并将状态设置为该数据中的第一项，然后第二个函数会将地图从前一个函数的纬度/经度移动到该位置。

这是我目前的代码：

  const nearestPod = () => {
    let newArr = [];
    let closest = [];

    data.map(item => newArr.push(item.distance));
    newArr.sort(function (a, b) {
      return a - b;
    });

    data.map(item => item.distance == newArr[0] && closest.push(item));
    setClosestPod(closest);

    setNearestActive(true);
    moveToNearestPod();
  };

  const moveToNearestPod = async () => {
    await nearestPod();
    let lat = closestPod[0].lat;
    let lng = closestPod[0].lng;

    setLat(lat);
    setLng(lng);
  };

此功能确实有效，但仅在第 2 次单击时才会向我抛出 Promise Rejection 警告，所以感觉我已经接近正确了，但如果有人可以提供一些专业知识以便我知道前进的最佳实践，我将不胜感激！

提前致谢。

标签： javascriptreactjsreact-nativeasync-awaitpromise

解决方案

这些都不需要async。但是 React 会分批排队和处理状态更新，因此您需要使用useEffect来获取这些状态更改的更改，然后设置您的 lat/lng 状态。

注意：map创建一个新数组，因此您不需要事先声明您的数组（否则使用forEach）。而且，第二个示例可能应该使用find. 它将返回一个符合条件的对象。

function nearestPod() {

  const newArr = data.map(item => item.distance);

  newArr.sort((a, b) => a - b);

  const closest = data.find(item => item.distance === newArr[0]);

  setClosestPod(closest);
  setNearestActive(true);

};

useEffect(() => {
  let lat = closestPod.lat;
  let lng = closestPod.lng;
  setLat(lat);
  setLng(lng);
}, [closestPod]);

推荐阅读