使用 .map 分配返回的承诺的值 [重复]

Posted 2023-03-07

【中文标题】使用 .map 分配返回的承诺的值 [重复]

【英文标题】：Assign value of returned promises with .map [duplicate]

【发布时间】：2020-06-08 11:51:00

【问题描述】：

当我尝试使用从故事中获得的返回值设置我的状态时，我会收到一个包含状态和值的 Promise 数组。

(30) [Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise]
0: Promise
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Object

image from my console.log on render

如何只分配来自 PromiseValue 的数据？

import React,  Component  from "react";
import axios from "axios";

class News extends Component 


state = 
  loading: true,
  data: null
;

async componentDidMount() 
  const ids = await axios.get(
    'https://hacker-news.firebaseio.com/v0/beststories.json?print=pretty&orderBy="$key"&limitToFirst=30'
  );

  const stories = await ids.data.map(id => 
    return axios.get(`https://hacker-news.firebaseio.com/v0/item/$id.json`);
  );

  this.setState( data: stories );


render() 
  console.log(this.state.data);
  const news = this.state.loading ? "Loading" : "News";
  return <div>news</div>;

【问题讨论】：

你需要使用Promise.all来解析一个promise数组。

@EmileBergeron，是的，确实如此。谢谢！

【参考方案1】：

使用Promise.all 获取单个 Promise，一旦数组中的每个 Promise 已解析，该 Promise 将使用一组值解析：

const storyPromises = ids.data.map(id => 
  return axios.get(`https://hacker-news.firebaseio.com/v0/item/$id.json`);
);

const stories = await Promise.all( storyPromises );

this.setState( data: stories );