Возникли проблемы с загрузкой из API, не знаете, что я делаю не так?

Question

Я пытаюсь получить из API и отобразить данные, которые я получаю. Я попытался использовать регулярную выборку с обещаниями и аксио, и это, похоже, ничего не делает. Я использую метод .map (), и я получаю карту ошибок не является функцией.

Я пытался использовать fetch и axios, чтобы попытаться получить данные из API.

    import React, { Component } from 'react';



    class RecentNews extends Component {
        state = {
          recentArticles: [],
          recentReports: [],
          isLoaded: false,
        }


    componentDidMount(){
      fetch(`https://spaceflightnewsapi.net/api/v1/articles?page=1`)
          .then(response => response.json())
          .then(json => this.setState(
            { recentArticles: json,
              isLoaded: true,
            }
          ))
    }


    render(){

      let { recentArticles, isLoaded } = this.state

      if (!isLoaded) {
        return <h1>Loading.....</h1>
          }

      else {

      return(
        <div className="recentnews">
        <div>
        { recentArticles.map(articles =>
          <p>{articles.title}</p>
        )


        }
        </div>

            </div>

          )
        }
      }
    }


    export default RecentNews

вот ошибка, которую я получаю

TypeError: RecentArticles.map не является функцией

▶ 17 стековых фреймов были свернуты.

Answer 1

.map() - это функция массивов в JavaScript - этот API возвращает объект.

Может показаться, что вам нужен массив docs внутри этого объекта, поэтому попробуйте изменить эту строку на:

{ recentArticles.docs.map(articles =>

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