如何等待所有函数，然后在React原生中呈现？

Question

我从API获取数据，下面是我的函数

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

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

const getReviews = async () => {
  let data = await ReviewsApi.get(`/${itemId}/`).then(({ data }) => data);
  data.map((a) => getReviewGiverName(a, data));
};

const getReviewGiverName = async (a, data) => {
  let data1 = await api.get(`/${a.buyer}/`).then(({ data }) => data);
  a.buyername = data1[0].first_name + ' ' + data1[0].last_name;
  setReviews(data);
};

我正在添加一个新的现场买家的名字到我的评论列表，其中我已经存储了来自API的数据。但问题是，如果我使用`console.log(reviews)，它会正确地在每个评论对象列表中显示买家的名字，但如果我通过地图功能在屏幕上呈现这些内容...它显示一些买家的名字，但对于一些买家的名字，它显示空白。

​

​

Answer 1

也许这样做会有帮助

const getReviews = () => {
  ReviewsApi.get(`/${itemId}/`).then(({ data }) =>
    data.map((a) => getReviewGiverName(a, data))
  );
};

或

您可以将重点放在setReviews状态上，以便每当评论发生更改时都会重新呈现。

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

Answer 2

，但问题是，如果我使用console.log(reviews)，它会正确地在每个评论对象列表中显示买家的姓名，但是如果我通过地图函数在屏幕上呈现这些内容...它显示一些买家的名字，但对于一些买家的名字，它显示空白。

看起来您正在将多个异步请求放入一个循环中，并且每个请求都在独立地更新状态。

当getReviewGiverName将新的buyername属性附加到a ( data中的审查对象)时，似乎也发生了一些对象突变。

您还将async/await语法与Promise链混合在一起。一般来说，你应该选择一个或另一个。

const getReviews = async () => {
  let data = await ReviewsApi.get(`/${itemId}/`)
    .then(({ data }) => data);
  data.map(a => getReviewGiverName(a, data))     
}

const getReviewGiverName = async (a, data) => {
  let data1 = await api.get(`/${a.buyer}/`)
    .then(({ data} ) => data);
  a.buyername = data1[0].first_name + ' ' + data1[0].last_name;
  setReviews(data) ;
}

为了解决这个问题，我建议将getReviewGiverName请求映射到Promises数组中，并对它们执行Promise.all操作，然后更新/设置reviews状态。在getReviewGiverName中，获取评论的购买者，并使用buyername属性组成一个新的评论对象。Promise.all返回一个映射的data数组，它是新的reviews状态。

const getReviews = async () => {
  const { data } = await ReviewsApi.get(`/${itemId}/`);
  
  const reviews = await Promise.all(data.map(getReviewGiverName));

  setReviews(reviews) 
}

const getReviewGiverName = async (review) => {
  const { data } = await api.get(`/${review.buyer}/`);

  return {
    ...review,
    buyername: data[0].first_name + ' ' + data1[0].last_name
  };
}