Вызов API в React

Question

Я пытаюсь отреагировать и пытаюсь сделать простое приложение, которое будет отображать статьи из Hacker News. Я уже сделал первый вызов их API

 componentDidMount() {
    fetch('https://hacker-news.firebaseio.com/v0/jobstories.json?print=pretty')
        .then(res => res.json())
        .then(articles => {
            this.setState({articles})
        })
  }

В качестве ответа возвращает массив идентификаторов статей. Чтобы получить подробную информацию по каждой статье, мне нужно перебрать полученный массив и сделать второй запрос для каждого идентификатора статьи, который должен выглядеть как

fetch(`https://hacker-news.firebaseio.com/v0/item/{id_from_the_array}`)

И я столкнулся с проблемой, потому что понятия не имею, как правильно ее реализовать. Может, кто-нибудь посоветует мне совет?

Answer 1

Один из способов, который вы можете сделать, это использовать разбивку на страницы или бесконечную прокрутку, чтобы вы могли отображать на экране около 10 или 15 новостей и загружать следующий набор данных одним нажатием кнопки. В противном случае вы можете отображать только идентификаторы на экране и получать данные одним нажатием кнопки.

Answer 2

это вам поможет

import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";


class App extends React.Component {
  state = {
    articles: []
  };

  componentDidMount() {
    fetch("https://hacker-news.firebaseio.com/v0/jobstories.json?print=pretty")
      .then(res => res.json())
      .then(articles => {
        articles.map(item => {
          fetch(`https://hacker-news.firebaseio.com/v0/item/${item}.json?print=pretty`)
            .then(res => res.json())
            .then(detailArticles => {
              const articles = this.state.articles.concat(detailArticles);
              this.setState({ articles });
              });
        });
      });
  }

  render() {
    return <p>{JSON.stringify(this.state.articles) }</p>;
  }
}

render(<App />, document.getElementById("root"));

codesandbox