运行上一个函数在 React/React 原生中完成时的函数

Question

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

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

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

这是我目前的代码：

  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);
  };

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

提前致谢。

Answer 1

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

注：map creates a new array, so you don't need to declare your arrays beforehand (otherwise use forEach). And, that second example should probably use find。它将return一个符合条件的对象。

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]);

运行上一个函数在 React/React 原生中完成时的函数

Running a function when it's previous function completes in React/React Native

javascript

promise

async-await

reactjs

react-native

运行 上一个函数在 React/React 原生中完成时的函数

Running a function when it's previous function completes in React/React Native

javascript

promise

async-await

reactjs

react-native

运行上一个函数在 React/React 原生中完成时的函数