useEffect 不等待 Promise.all？答案

【问题标题】：useEffect doesn't wait Promise.all?useEffect 不等待 Promise.all？
【发布时间】：2021-03-21 02:50:27
【问题描述】：

我想为作为 props (rootComments) 传递的数组中的每个对象获取数据并将数据添加到对象属性中：

useEffect(() => {
  rootComments.map(rootComment => {
    if (rootComment.kids) {
      rootComment.kidsText = []
      fetchKidsText(rootComment.kids)
    }
  })
  console.log(rootComments)
  rootComments.map(comment => console.log(Object.values(comment)))
}, [rootComments])

const fetchKidsText = async (ids) => {
  await Promise.all(
    ids.map(id => fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`).then(response => response.json()).then(result => {
      rootComments.map(comment => {
        if (comment.id === result.parent) {
          comment.kidsText = comment.kidsText.concat(result.text)
        }
      })
    }))
  );
}

似乎它不起作用，我无法呈现 rootComments.map(comment => comment.kidsText) 并且我无法将其记录为 rootComments.map(comment => console.log(Object.values(comment)))（就像没有新的 kidsText 属性一样）或 rootComments.map(comment => console.log(comment.kidsText))（返回空大批）。但。当我记录console.log(rootComments) 时，它返回具有新kidsText 属性的对象数组。

我的第一个想法是 useEffect() 不会等待 rootComments 在另一个组件中获取，但这似乎不是问题，所以可能是 fetchKidsText() 内部的东西或者它与 @ 交互的方式987654332@?

【问题讨论】：

您的代码有很多问题。我认为@kigiri 目前的回答很好地总结了这些问题。

标签： reactjs fetch-api

【解决方案1】：

这段代码有一些问题：

您在不使用 setState 的情况下更改了您的 rootComments 对象（react 无法从中更新）
您使用map 进行迭代但丢弃了结果
.then 在async / await 函数中的混合
您不返回 Promise.all 的值，而是返回 await 它

.map 不是 for 循环，请使用 .forEach 或 for..of 循环

至于你的实际问题，我的第一点可能是主要问题，显示更多代码以便我们确认

编辑建议的替代代码：

useEffect(() => {
  // get all the kids id, this create a single big array with every kids:
  const allKids = rootComments.flatMap(rootComment => rootComment.kids || [])

  // use a controller too cancel fetch request if component is unmounted
  // otherwhise, trying to setState if the component is unmounted will
  // mess react up:
  const controller = new AbortController()

  // we fetch all the kids at once instead of doing this in a map like before
  fetchKidsText(allKids, controller.signal)
    .then(setRootComment) // note that i'm using `.then` here,
    // because we can't await in hooks we must return a callback or undefined.
    .catch(err => {
      if (err.name === 'AbortError') return // we can safely ignore abort error
      // ? handle error here
    })
  return () => controller.abort()
}, [rootComments])

const fetchKidsText = async (ids, signal) => {
  // first we call the api and get everything a big result
  const results = await Promise.all(ids.map(async id => {
    const url = `https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`
    const res = await fetch(url, { signal })
    return res.json()
  }))

  // now what you were trying to do was merge every children text comment
  // since we got them all, just one filter should work:
  return rootComments.map(comment => {
    const children = results.filter(r => r.parent === comment.id)
    const kidsText = children.map(r => r.text)
    return { ...comments, kidsText }
  })
}

不要按原样使用此代码，我没有测试它只是为了解释我将如何尝试用 cmets 解决您的问题来解释我的共鸣。

祝你好运！

【讨论】：