Question

我有一个从新闻API中获取的json对象，并且只想打印出其中一篇文章的作者。我想知道如何在我称为“作者”的react组件中进行操作。

这是json对象：太长了，无法包含在这里，但有链接供您查看。

可从https://newsapi.org/进行访问，共有20篇文章。

我有这个react组件，我正在尝试打印该文章的一位作者：

import React, { Component } from 'react';

const APIurl = 'https://newsapi.org/v2/top-headlines? 
country=it&apiKey=0b3e87958d0b4e71a9e2ed3eea69237a';

class Author extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        fetch(APIurl)
            .then(response => response.json())
            .then(response => {
                this.setState({
                    articles: response
                })
            })
    }

    render() {
        return (
            <h5 class="f6 ttu tracked black-80">
                {this.state.articles.article[0].author}
            </h5>
       );
   }
}

export default Author;

但是，由于我遇到此错误，某些事情一定不太正确：

TypeError: Cannot read property 'articles' of undefined

 21 | render() {
 22 |   return (
 23 |       <h5 class="f6 ttu tracked black-80">
> 24 |          {this.state.articles.articles[0].author}
 25 |       </h5>
 26 |   );
 27 | }

我不确定我做错了什么。也对json对象格式不佳表示抱歉。

看到下面的建议后，我现在进行了一些更改，以便我的代码如下所示：

import React, { Component } from 'react';

const APIurl = 'https://newsapi.org/v2/top-headlines?       country=it&apiKey=0b3e87958d0b4e71a9e2ed3eea69237a';

class Author extends Component {
    constructor(props) {
        super(props);
        this.state = {
            articles: []
        };
    }

    componentDidMount() {
        fetch(APIurl)
            .then(response => response.json())
            .then(response => {
                this.setState({
                    articles: response
                })
            })
    }

    render() {
        const { articles } = this.state;
        return (
            <h5 class="f6 ttu tracked black-80">
                {articles.length>0 && articles.articles[1].author}
            </h5>
        );
    }
}

export default Author;

但是，即使当我使用chrome开发人员工具并查看组件的状态时，它仍然无法在author react组件中打印出任何内容：

State
    articles: {…}
        articles: Array[20]
            0: {…}
            1: {…}
                 author: "Davide Stoppini"
                 description: "A Pisa, divertente pareggio con i russi, più avanti per quanto riguarda la condizione fisica. Passi in avanti rispetto al Sion: bene gli esterni offensivi, anche i due attaccanti confermano la confide…"
                 publishedAt: "2018-07-21T20:20:21Z"
                 source: {…}
                 title: "Inter, fuochi d'artificio con lo Zenit: è 3-3. In gol Icardi e Lautaro"
                 url: "https://www.gazzetta.it/Calcio/Serie-A/Inter/21-07-2018/inter-fuochi-d-artificio-lo-zenit-3-3-gol-icardi-lautaro-280799153444.shtml"
                  urlToImage:"https://images2.gazzettaobjects.it/methode_image/2018/07/21/Calcio/Foto%20Calcio%20-%20Trattate/1d50f03c94d965c2ca84bd3eec0137c9_169_xl.jpg

*注意：这仅显示articles数组的第一第二个元素。

Answer 1

基本上，必须首先将文章声明为空数组，如下所示：

this.state = {
   articles: []
};

并且还需要如下修改渲染器中的代码：

{this.state.articles && (this.state.articles.article.length>0) &&
this.state.articles.article[0].author
}

希望它会对您有所帮助。

Answer 2

您遇到的问题是因为您的代码没有准备好经历React的生命周期。在componentDidMount阶段获取数据之前，需要进行渲染阶段，即发生错误的地方。在该渲染阶段articles应该是一个没有数据的空数组，然后需要检查以避免在数组为空时渲染任何内容。因此，为了避免在render阶段之前在componentDidMount阶段出现该错误，您需要在状态中设置一个名为articles的空数组，并在render方法中检查它是否不是空，以呈现所需的值。

import React, { Component } from 'react';

const APIurl = 'https://newsapi.org/v2/top-headlines? 
country=it&apiKey=0b3e87958d0b4e71a9e2ed3eea69237a';

class Author extends Component {
    constructor(props) {
        super(props);
        this.state = { articles: []};
    }

    componentDidMount() {
        fetch(APIurl)
            .then(response => response.json())
            .then(response => {
                this.setState({
                    articles: response.articles
                })
            })
    }

    render() {
      const { articles } = this.state;
        return (
            <h5 class="f6 ttu tracked black-80">
                {articles.length > 0 && articles[0].author}
            </h5>
       );
   }
}

export default Author;

使用JavaScript React Native从API中的json对象提取数据

2 个答案: