React Native中如何等待所有函数执行完成后再进行页面渲染

问题原因 #

• 你的getReviewGiverName是异步函数，遍历reviews数组时会同时触发多个并行的用户信息请求，每个请求完成后都会立即调用setReviews更新状态。但此时其他请求还没返回，对应条目的buyername还没赋值，渲染时就会出现空白。
• 你直接修改原数组中的对象属性属于状态突变，没有生成新的数组引用，部分场景下React不会触发重渲染。你在控制台能看到完整的buyername是因为控制台打印的是对象引用，后续异步赋值完成后控制台会自动更新最新值，但渲染逻辑已经在更早的时机执行完成。
• 频繁调用setReviews也会产生大量不必要的重渲染，影响性能。

修复方案 #

等待所有buyer信息请求全部完成后，再统一更新reviews状态即可，参考代码如下：

useEffect(() => {
  getSeller();
  getReviews();
}, []);

const getSeller = async () => {
  let { data } = await api.get(`/${itemSeller}/`);
  setUser({ user: data[0].first_name + ' ' + data[0].last_name });
};

const getReviews = async () => {
  let { data: reviews } = await ReviewsApi.get(`/${itemId}/`);
  // 等待所有用户信息请求完成
  const reviewsWithBuyerName = await Promise.all(
    reviews.map(async (review) => {
      const { data: userInfo } = await api.get(`/${review.buyer}/`);
      // 返回新对象避免状态突变
      return {
        ...review,
        buyername: `${userInfo[0].first_name} ${userInfo[0].last_name}`
      }
    })
  )
  // 统一更新状态
  setReviews(reviewsWithBuyerName);
};

如果存在单条用户信息请求失败的场景，可以在单条请求逻辑中加异常捕获，给buyername设置兜底显示值即可。

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