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

Question

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=20c171a3b0f845df98a5d436773256d7&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=20c171a3b0f845df98a5d436773256d7&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 检索数据。 实际上，我能够以 json 格式从 api 接收数据，但无法将它们传递给组件。 由于安全原因，我用“#################”替换了我的 api 令牌，除此之外，一切都一样。 我只是使用 react js 创建一个新闻网站并从 newsapi.org 获取新闻数据

Answer 1

欢迎来到 SO，我可以看到您在 url 变量中包含一个主体。 这不能安抚获取 function。 您可能还想更改您的 api 密钥或编辑此密钥并将其删除，因为它仍然存在于您的两个 url 变量中。

这是获取 promise 以及如何利用正文获取 POST 数据的一个很好的资源： https://developer.mozilla.org/en-US/docs/Web/API/fetch

You can also store your url variable inside the state of the class and refer to it instead of declaring it in each individual function.

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

要执行整个 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>
)