React调用API获取任务数据后setLocation赋值日志为空如何解决

• React的状态更新是异步批量执行的，调用setLocation后，当前函数作用域内的location变量还是本次渲染的旧值，需要等组件触发重渲染后才能拿到更新后的状态值，所以你在setLocation后立刻打印location得到的还是初始的空对象。
• 调用顺序存在逻辑错误：loadTask是异步函数，你在handleBarcode中调用loadTask时没有加await，就立刻执行了distance函数，此时接口请求尚未返回，setLocation还没被触发，distance读取的location自然还是初始值。

1. 调整异步调用逻辑 #

给异步函数添加await关键字等待执行完成，直接用接口返回的resultData.location做后续逻辑处理，不需要等待状态更新：

// 修改loadTask，把接口返回结果透出
const loadTask = async (taskId) => {
  const { data: resultData } = await axios(
    `order/task/get-by-id/${taskId}`,
    config
  );
  setLocation(resultData.location);
  setTaskSelected(resultData);
  toast.success('Task loaded');
  return resultData;
};

// 修改handleBarcode为async函数，等待loadTask执行完成
const handleBarcode = async (result) => {
  setActiveTab('Dashboard');
  if (!isAutoAssign) {
    const resultData = await loadTask(result);
    // 直接用接口返回的location执行distance，无需依赖状态
    distance(resultData.location);
    onRequestClose();
    return;
  }
  try {
    await autoAssign(result);
  } catch (error) {
    toast.error('This geofence has more than one driver!');
  }
  onRequestClose();
};

2. 用useEffect监听状态变化执行后续逻辑 #

如果后续逻辑需要依赖更新后的location状态，可以添加useEffect监听location变化，状态更新后自动触发执行：

useEffect(() => {
  // 确保location有有效值后再执行距离计算
  if(location?.latitude && location?.longitude) {
    distance();
  }
}, [location])

额外优化提示 #

你当前的distance函数存在逻辑错误：driverLoc是司机位置数组，你直接用单个经纬度和数组做运算得到的dist不是每个司机对应的距离，后续的循环对比逻辑也无法正确匹配到最近司机，需要调整为遍历每个司机位置分别计算距离，再筛选出距离最小的司机ID。

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