将返回的promise的值指定为。地图[副本]

Question

当我试图用从故事中获得的返回值设置我的状态时，我会收到一个数组，其中充满了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

从我的控制台图像。登录渲染

如何仅分配来自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>;
}

}

Answer 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 });