如何使用Promise.all+Array.prototype.map()获取不同的数据

Question

我有一个ID数组，我试图用每个ID获取数据，并将其全部作为组件状态返回。

let urls = commentsIds.map(id => `https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`);
useEffect(() => {
fetchComments();
}, [])
const fetchComments = async () => {
let fetchedComments = [];
Promise.all(
urls.map(async (url) => {
let response = await fetch(url)
let data = await response.json();
fetchedComments.push(data);
console.log(fetchedComments)
})
)
setComments(fetchedComments);
}

当我只提取一个ID:时，它工作得很好

const fetchComments = async () => {
let fetchedComments = [];
const response = await fetch(`https://hacker-news.firebaseio.com/v0/item/25322480.json?print=pretty`);
const data = await response.json();
fetchedComments.push(data)
console.log(fetchedComments)
}

但Promise.all不是第一种情况。有时当我更改代码并且不重新加载页面时，Promise.al会执行console.log，但它仍然没有在页面上呈现：

<div>
{comments.map(comment => (
<p key={comment}>{comment.text}</p>
))}
</div>

在第二种情况下，只有一个ID，console.log和渲染都能很好地工作，所以我可能把Promise.all搞砸了，但我找不到确切的位置和方式。

Answer 1

这里是修复：

const fetchComments = async () => {
const response = await Promise.all(
urls.map((url) => fetch(url).then(res => res.json()))
)
const fetchedComments = [].concat.apply([], response);
setComments(fetchedComments);
}