我无法从此 API 获取数据。这是代码答案

【问题标题】：I am unable to fetch data from this API. Here is the code我无法从此 API 获取数据。这是代码
【发布时间】：2022-01-16 00:36:03
【问题描述】：

import React, { Component } from 'react'
import NewsItem from './NewsItem';

export class News extends Component {
    constructor() {
        super();
        console.log("News Constructor");
        this.state = {
            articles: this.articles,
            loading: false,
            page: 1,
        }
    }
    async componentDidMount() {
        let url = `https://newsapi.org/v2/top-headlines?country=us&apiKey=########################&page=1&pageSize=20`;
        let data = await fetch(url);
        let parsedData = await data.json();
           console.log(parsedData);
        this.setState({
            articles: this.parsedData.articles,
            totalResults: this.parsedData.totalResults,
        })
    }

    handlePrevClick = async () => {
        console.log("Prev Click");
        let url = `https://newsapi.org/v2/top-headlines?country=us&apiKey=########################&page=${this.state.page - 1}&pageSize=20`;
        let data = await fetch(url);
        let parsedData = await data.json();
           console.log(parsedData);
        this.setState({
            articles: this.parsedData.articles,
            page: this.state.page - 1,
        })
    }
    handleNextClick = async () => {
        console.log("Next Click");
        let url = `https://newsapi.org/v2/top-headlines?country=us&apiKey=########################&page=${this.state.page + 1}&pageSize=20`;
        let data = await fetch(url);
        let parsedData = await data.json();
        this.setState({
            articles: this.parsedData.articles,
            page: this.state.page + 1,
        })

    }

    render() {
        return (
            <div className="container my-3">
                <h1 className="text-center" >NewsKeeda - Top Headlines</h1>

                <div className="row">
                    {this.state.articles.map((element) => {
                        return <div className="col-md-4" key={element.url} >
                            <NewsItem title={element ? element.title.slice(0, 35) : ""} content={element ? element.content : ""} imageUrl={element.urlToImage} newsUrl={element.url} />
                        </div>

                    })}

                </div>
                <div className="container d-flex justify-content-between">
                    <button disabled={this.state.page <= 1} type="button" onClick={this.handlePrevClick} className="btn btn-dark">&larr; Previous</button>
                    <button disabled={this.state.page + 1 > Math.ceil(this.state.totalResults / 20)} type="button" onClick={this.handleNextClick} className="btn btn-dark">Next &rarr;</button>

                </div>
            </div>
        )
    }
}


export default News;

在上面编写的代码中..我无法从 api 检索数据。实际上我能够从 api 以 json 格式接收数据，但无法将它们传递给组件。由于安全原因，我用“#################”替换了我的api令牌，除此之外，一切都是一样的。我只是使用 react js 创建一个新闻网站并从 newsapi.org 获取新闻数据

【问题讨论】：

标签： javascript reactjs api fetch fetch-api

【解决方案1】：

我可以看到您在 url 变量中包含了一个正文，这不会安抚 fetch 函数。您可能还想更改您的 api 密钥或对其进行编辑并将其删除，因为它仍然存在于您的 2 个 url 变量中。

这里是 fetch promise 以及如何将 body 用于 POST 数据的一个很好的资源：@987654321@

您还可以将 url 变量存储在类的状态中并引用它，而不是在每个单独的函数中声明它：

this.state = {
articles: this.articles,
loading: false,
page: 1,
url: "apiUrl"
}

在这行代码的return之后需要有一个(才能执行整个jsx块：

return ( <div className="col-md-4" key={element.url} >
<NewsItem title={element ? element.title.slice(0, 35) : ""} content={element ? element.content : ""} imageUrl={element.urlToImage} newsUrl={element.url} />
</div>
)

【讨论】：