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

Question

我有一个从新闻 API 中获取的 json 对象，我想打印出其中一篇文章的作者。我想知道如何在我称之为“作者”的反应组件中做到这一点。

这是 json 对象：这里包含的内容太长，但有链接供您查看。

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

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

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 开发人员工具并查看组件的状态时，它看起来像这样：

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

*注意：这只是显示文章数组的第一个第二个元素。

Answer 1

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

this.state = {
   articles: []
};

并且还需要修改render里面的代码如下：

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

希望对你有帮助。

Answer 2

您遇到的问题是因为您的代码没有准备好通过 React 的生命周期。在您获得componentDidMount 阶段的数据之前，有一个渲染阶段，这就是发生错误的地方。在那个渲染阶段articles 应该是一个没有数据的空数组，然后你需要检查以避免在数组为空时渲染任何东西。因此，为了避免在componentDidMount 阶段之前的render 阶段出现该错误，您需要在状态中设置一个名为articles 的空数组，并在渲染方法中检查它是否不为空，以渲染该值你想要的。

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;

Answer 3

React Native 中的新闻应用：

const SITE_URL =
  "https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=a39bbc7131c649a3ad23fe79063d996f";

const TestScreen = () => {
 

  const [myData, setMyData] = useState();
  useEffect(() => {
    axios
      .get(SITE_URL)
      .then((res) => {
        // console.log("Response from main API: ", res);
        console.log(
          "-----------------------------------------------------------  Start"
        );

        // console.log("Response from Home Data Data: ", res.data.data);
        console.log(
          "Response from NEWS data articles: ",
          res.data.articles
        );
        console.log(
          "-----------------------------------------------------------  End"
        );
        // let companyData = res.data.data;
        let companyData = res.data.articles;
        setMyData(companyData);

        setData({
          Company: companyData,
          Description: "",
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);
  //   console.log("myData:", { myData });
  const renderItem = ({ item, index }) => (
    <TouchableOpacity style={styles.container}>
      <Text style={styles.title}>
        {index}. {item.author}
      </Text>
      <Text> {item.description} </Text>
      <View>
        <Image
          style={{
            width: 500,
            height: 100,
          }}
          source={{
            uri: item.urlToImage,
          }}
        />
      </View>
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <Text>Read Later Screen</Text>
      <Text>|</Text>
      {<FlatList data={myData} renderItem={renderItem} />}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default TestScreen;