React Native Axios嵌套API调用问题：单次点击仅执行首个请求

兄弟，你遇到的这个“第一次点击只有地址转经纬度的API跑，第二次才查餐厅”的问题，几乎可以肯定是异步操作的执行顺序和状态更新时机没处理好！我之前做地图相关功能也踩过一模一样的坑，给你分析下原因和解决办法：

问题根源 #

咱们先模拟下你大概率写的错误逻辑（别慌，新手90%都会这么写）：

// 假设用React的状态存经纬度
const [coords, setCoords] = useState(null);

// 第一个API：地址转经纬度
const getCoords = async (address) => {
  const res = await fetch(`/api/geocode?address=${address}`);
  const data = await res.json();
  setCoords({ lat: data.lat, lng: data.lng }); // 这里是异步更新状态！
};

// 按钮绑定的函数
const FetchRestaurants = () => {
  getCoords("用户输入的地址");
  // 这里直接调用查餐厅的API，但此时coords还没更新！
  fetchNearbyRestaurants(coords.lat, coords.lng);
};

为啥会这样？因为React的setState（或者其他状态库的更新）是异步批量更新的——你调用setCoords后，coords不会立刻变成新值，得等组件下一次渲染才会更新。所以第一次点击时，fetchNearbyRestaurants拿到的还是旧的coords（甚至是null），自然发不出有效请求；第二次点击时，上一次的状态更新已经完成，才能拿到正确的经纬度。

3种靠谱的解决方案 #

方案1：直接在第一个API的回调里触发第二个 #

最直接的办法：等第一个API拿到经纬度后，立刻调用第二个API，完全不用依赖状态的更新（当然状态该更还是要更）：

const FetchRestaurants = async () => {
  // 先等第一个API返回结果
  const newCoords = await getCoords("用户输入的地址");
  // 确认拿到有效坐标再查餐厅
  if (newCoords?.lat && newCoords?.lng) {
    await fetchNearbyRestaurants(newCoords.lat, newCoords.lng);
  }
};

// 修改第一个API函数，让它返回经纬度
const getCoords = async (address) => {
  try {
    const res = await fetch(`/api/geocode?address=${address}`);
    const data = await res.json();
    const coords = { lat: data.lat, lng: data.lng };
    setCoords(coords); // 更新状态用于展示
    return coords; // 返回坐标给后续逻辑用
  } catch (err) {
    console.error("拿经纬度失败：", err);
    return null;
  }
};

方案2：用状态监听自动触发（适合依赖状态的场景） #

如果你的查餐厅逻辑必须依赖coords状态的变化（比如其他组件也要用这个坐标），可以用useEffect监听coords，一旦坐标更新就自动查餐厅：

const [coords, setCoords] = useState(null);
const [shouldFetchRestaurants, setShouldFetchRestaurants] = useState(false);

// 监听coords变化，自动触发餐厅查询
useEffect(() => {
  if (coords?.lat && coords?.lng && shouldFetchRestaurants) {
    const fetchRestaurants = async () => {
      await fetchNearbyRestaurants(coords.lat, coords.lng);
      setShouldFetchRestaurants(false); // 重置标记
    };
    fetchRestaurants();
  }
}, [coords, shouldFetchRestaurants]);

// 按钮只负责触发第一个API和标记要查餐厅
const FetchRestaurants = () => {
  getCoords("用户输入的地址");
  setShouldFetchRestaurants(true);
};

// 第一个API函数不变
const getCoords = async (address) => {
  const res = await fetch(`/api/geocode?address=${address}`);
  const data = await res.json();
  setCoords({ lat: data.lat, lng: data.lng });
};

方案3：完全跳过状态，直接链式调用 #

如果不需要把经纬度存在状态里（或者状态只是用来展示），可以直接把两个API链式调用，省掉状态的麻烦：

const FetchRestaurants = async () => {
  try {
    // 第一步：拿经纬度
    const geoRes = await fetch(`/api/geocode?address=用户输入的地址`);
    const geoData = await geoRes.json();
    const { lat, lng } = geoData;
    
    // 第二步：直接用经纬度查餐厅
    if (lat && lng) {
      const restaurantRes = await fetch(`/api/restaurants?lat=${lat}&lng=${lng}`);
      const restaurants = await restaurantRes.json();
      // 这里可以把餐厅数据存状态展示
      setRestaurants(restaurants);
    }
  } catch (err) {
    console.error("请求出错了：", err);
  }
};

关键提醒 #

• 永远记住：异步操作（API请求、状态更新）不会立刻完成，依赖异步结果的逻辑必须等异步操作结束后再执行。
• 别在状态更新后立刻读状态值！要么让异步函数返回结果，要么用useEffect监听状态变化。
• 一定要加错误处理，不然某个API挂了，整个流程就卡住了。

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