React/React Native中如何在前一个函数执行完成后再运行下一个函数

• React 的setState是异步批量更新的，调用setClosestPod后，当前渲染周期内的closestPod还是旧值，只有等到下一次组件重新渲染才能拿到更新后的值，这就是你第一次点击不生效、第二次点击才能拿到上一次计算结果的核心原因。
• 逻辑存在循环调用问题：nearestPod内部主动调用了moveToNearestPod，而moveToNearestPod又去await nearestPod，会造成无限递归，直接引发运行报错。
• await仅对Promise对象生效，你定义的nearestPod是普通同步函数，await它没有任何等待效果，且首次执行时closestPod为空，访问closestPod[0]会抛出未定义错误，就是你看到的Promise Rejection警告。

因为你的位置筛选逻辑本身是同步操作，完全不需要用async/await做等待，直接把计算得到的最近点位数据同时用于更新状态和传递给地图移动方法即可，避免依赖异步更新后的state值：

// 抽离计算最近点位的逻辑，直接返回计算结果
const getNearestPod = () => {
  // 优化：直接取所有distance的最小值，不需要额外排序数组
  const minDistance = Math.min(...data.map(item => item.distance))
  // 筛选出距离最近的点位
  const closest = data.filter(item => item.distance === minDistance)
  return closest
}

const handleNearestPod = () => {
  const closest = getNearestPod()
  // 同时更新状态和执行地图移动逻辑，不需要等state更新
  setClosestPod(closest)
  setNearestActive(true)
  // 直接把计算得到的closest传进去，不需要从state取
  moveToNearestPod(closest)
}

const moveToNearestPod = (closestPod) => {
  // 加个边界判断，避免空值报错
  if (!closestPod?.length) return
  const lat = closestPod[0].lat
  const lng = closestPod[0].lng
  setLat(lat)
  setLng(lng)
}

如果后续逻辑必须依赖更新后的state值，可以用useEffect监听对应state的变化，自动触发后续操作：

// 计算并更新最近点位
const handleNearestPod = () => {
  const minDistance = Math.min(...data.map(item => item.distance))
  const closest = data.filter(item => item.distance === minDistance)
  setClosestPod(closest)
  setNearestActive(true)
}

// 监听closestPod变化，更新后自动执行地图移动
useEffect(() => {
  // 只有nearestActive为true时才执行移动，避免初始化时误触发
  if (!nearestActive || !closestPod?.length) return
  const lat = closestPod[0].lat
  const lng = closestPod[0].lng
  setLat(lat)
  setLng(lng)
}, [closestPod, nearestActive])

• 不要用map做纯遍历操作，map的设计目的是返回新数组，纯遍历请用forEach，筛选数组直接用filter更符合语义。
• 访问数组第一项前先判断数组是否为空，避免出现Cannot read properties of undefined的报错。
• 你的筛选逻辑可以直接用Math.min找最小距离，不需要对距离数组做全量排序，性能更好。

内容的提问来源于stack exchange，提问作者Asher