React Native如何等待所有Axios请求完成后再渲染结果列表

核心思路：先攒齐所有数据，再一次性更新状态 #

你现在的问题是每处理完一个房产就更新results状态，导致组件反复渲染。直接改成先把所有处理好的房产数据收集齐，再一次性更新状态就行，具体这么做：

1. 用Promise.all批量处理异步请求 #

在setPropertyDetails里，别在遍历的时候就调用setResults，而是把每个房产的API请求和计算逻辑包装成Promise，放进数组里，等所有Promise都完成后再统一处理：

async function setPropertyDetails(properties, token) {
  // 给每个房产生成一个处理Promise
  const propertyTasks = properties.map(async (property) => {
    // 调用Precisely API拿税率
    const taxRes = await axios.get(`你的Precisely API地址/${property.id}`, {
      headers: { Authorization: `Bearer ${token}` }
    });
    const taxRate = taxRes.data.taxRate;

    // 计算首付、贷款、现金流这些属性
    const downPayment = property.price * 0.2;
    const loanAmount = property.price - downPayment;
    // 这里补全你自己的现金流计算逻辑

    // 返回处理好的房产对象
    return {
      ...property,
      taxRate,
      downPayment,
      loanAmount
      // 其他计算后的字段
    };
  });

  // 等所有任务都完成，拿到完整的处理后数组
  const allProcessedProperties = await Promise.all(propertyTasks);

  // 一次性更新results状态
  setResults(allProcessedProperties);
  // 别忘了把loading改成false，结束加载
  setLoading(false);
}

2. 调整loading状态逻辑 #

确保开始获取数据时把loading设为true，等所有请求处理完、状态更新后再把loading设为false。这样<PropertiesScreen>就会在加载时显示loading提示，加载完成后直接渲染完整的列表，不会出现逐个添加的情况。

容错处理（可选） #

怕某个房产的API请求失败导致整个流程卡壳的话，可以给每个Promise加个错误捕获：

const propertyTasks = properties.map(async (property) => {
  try {
    // 原有的请求和计算逻辑
    return processedProperty;
  } catch (err) {
    console.error(`处理房产${property.id}出错:`, err);
    // 可以返回带错误标记的原房产，不影响其他数据
    return { ...property, hasError: true };
  }
});

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