在 componentDidMount() 中使用 React.setState 来获取嵌套 promise 中返回的数据？

Question

I'm trying to put some data into state in a React app. The flow involves fetching a list of IDs from the HackerNews API, then taking each ID and making an additional API call to fetch the item associated with each ID. I ultimately want to have an array of 50 items in my component state (the resulting value of the each '2nd-level' fetch.

When I setState from JUST the single 'top-level' promise/API call, it works fine and my state is set with an array of IDs. When I include a second .then() API call and try to map over a series of subsequent API calls, my state gets set with unresolved Promises, then the fetch() calls are made.

I'm sure this a problem with my poor grasp on building appropriate async methods.

Can someone help me figure out what I'm doing wrong, and what the best practice for this is??

My component:

import React from 'react'
import { fetchStoryList } from '../utils/api'

export default class Stories extends React.Component {
  state = {
    storyType: 'top',
    storyList: null,
    error: null,
  }

  componentDidMount () {
    let { storyType } = this.state

    fetchStoryList(storyType)
      .then((data) => {
        console.log("data", data)
        this.setState({ storyList: data })
      })
      .catch((error) => {
        console.warn('Error fetching stories: ', error)

        this.setState({
          error: `There was an error fetching the stories.`
        })
      })
  }

  render() {
    return (
      <pre>{JSON.stringify(this.state.storyList)}</pre>
    )
  }
}

My API Interface:

// HackerNews API Interface

function fetchStoryIds (type = 'top') {
  const endpoint = `https://hacker-news.firebaseio.com/v0/${type}stories.json`

  return fetch(endpoint)
    .then((res) => res.json())
    .then((storyIds) => {
      if(storyIds === null) {
        throw new Error(`Cannot fetch ${type} story IDs`)
      }

      return storyIds
    })
}

function fetchItemById(id) {
  const endpoint = `https://hacker-news.firebaseio.com/v0/item/${id}.json`

  return fetch(endpoint)
    .then((res) => res.json())
    .then((item) => item)
}

export function fetchStoryList (type) {
  return fetchStoryIds(type)
    .then((idList) => idList.slice(0,50))
    .then((idList) => {
      return idList.map((id) => {
        return fetchItemById(id)
      })
    })
//ABOVE CODE WORKS WHEN I COMMENT OUT THE SECOND THEN STATEMENT

Answer 1

One solution would be to update fetchStoryList() so that the final .then() returns a promise that is resolved after all promises in the mapped array (ie from idList.map(..) ) are resolved.

This can be achieved with Promise.all() . Promise.all() take an array as an input, and will complete after all promises in the supplied array have successfully completed:

export function fetchStoryList(type) {

  return fetchStoryIds(type)
    .then((idList) => idList.slice(0,50))
    .then((idList) => {

      /* Pass array of promises from map to Promise.all() */
      return Promise.all(idList.map((id) => {
        return fetchItemById(id)
      });

    });
}

Answer 2

You are not waiting for some asynchronous code to "finish"

ie

.then((idList) => {
  return idList.map((id) => {
    return fetchItemById(id)
  })
})

returns returns an array of promises that you are not waiting for

To fix, use Promise.all

(also cleaned up code removing redundancies)

function fetchStoryIds (type = 'top') {
    const endpoint = `https://hacker-news.firebaseio.com/v0/${type}stories.json`;

    return fetch(endpoint)
    .then((res) => res.json())
    .then((storyIds) => {
        if(storyIds === null) {
            throw new Error(`Cannot fetch ${type} story IDs`);
        }
        return storyIds;
    });
}

function fetchItemById(id) {
    const endpoint = `https://hacker-news.firebaseio.com/v0/item/${id}.json`
    return fetch(endpoint)
    .then(res => res.json());
}

export function fetchStoryList (type) {
    return fetchStoryIds(type)
    .then(idList => Promise.all(idList.slice(0,50).map(id => fetchItemById(id)));
}