Question

我正在尝试从api获取并显示即时获取的数据。我尝试过使用带有promise和axios的常规提取，但似乎没有做任何事情。我正在使用.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：centralArticles.map不是函数

▶17个堆叠框架被折叠。

Answer 1

docs是JavaScript中数组的功能-该API正在返回对象。

您似乎想要的是该对象内的{ recentArticles.docs.map(articles =>数组，因此请尝试将该行更改为：

<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<permission android:name="android.permission.BLUETOOTH" android:label="BLUETOOTH" />
<permission android:name="android.permission.BLUETOOTH_ADMIN" />
<permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

该API返回的对象中的其他键与分页有关。您应该使用这些控件创建分页控件，例如，下一页，上一页链接等。

从api提取时遇到问题，不确定我在做什么错吗？

1 个答案: