Question

尝试从 API 获取数据时获取未定义结果 - React

2019-01-01

7518

reactjs

因此，我尝试使用从 API 获取的数据设置一个变量。

当我在控制台中将其登录到浏览器中时，一切正常，但是当我尝试在 React 上设置变量时，该变量最终被取消。有人可以告诉我这里遗漏了什么吗？

这是我的代码：

import React from 'react'

let news
function getNews () {
  fetch(
    'https://newsapi.org/v2/top-headlines?country=us&apiKey=6f9cf5e6b9684bd3a6a8117e35feb1c9'
  )
    .then(res => res.json())
    .then(data => {
      news = data
      return news
    })
}

getNews()
class NewsApi extends React.Component {
  render () {
    return <div />
  }
}

export default NewsApi

Answer 1

您的 getNews 函数是异步的。您应该使用状态来保存数据。因此，一旦获取数据，您就可以在组件中使用该数据。

import React from 'react';

class NewsApi extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            news: []
        };
        this.getNews = this.getNews.bind(this);
    }

    componentDidMount() {
        this.getNews()
    }

    getNews() {
        fetch('https://newsapi.org/v2/top-headlines?country=us&apiKey=6f9cf5e6b9684bd3a6a8117e35feb1c9')
            .then(res => res.json())
            .then((data) => {
                this.setState({news:data.articles});
            });
    }

    render() {
        console.log(this.state.news)
        return (
            <div></div>
        );
    }
}

export default NewsApi;

Answer 2

试试这个：它会输出你想要的。 ** 注意： Fetch 是异步函数，意味着它必须在（例如）生命周期方法（如 componentDidMount）内调用。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      news: []
    };
  }

  componentDidMount() {
    fetch(
      "https://newsapi.org/v2/top-headlines?country=us&apiKey=6f9cf5e6b9684bd3a6a8117e35feb1c9"
    )
      .then(response => response.json())
      .then(data => this.setState({ news: data.articles }));
  }

  render() {
    console.log(this.state.news);
    return <div />;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是一个实例（您还可以看到控制台输出）\

Answer 3

请查看下面的代码片段以获取 示例实现 。

一些 关键点 ：

尝试在 componentDidMount()
使用 state 和 this.setState()
这将在数据提取后导致 自动重新渲染 。
方便使用异步函数调用：这些工具可以轻松 在组件中使用数据而不必知道数据何时可用 ，并有助于消除您遇到的 未定义 问题。

class NewsApi extends React.Component {
  state = {
    articles: []
  };

  componentDidMount() {
    fetch(
      "https://newsapi.org/v2/top-headlines?country=us&apiKey=6f9cf5e6b9684bd3a6a8117e35feb1c9"
    )
      .then(res => res.json())
      .then(data => data.articles)
      .then(articles => {
        this.setState({ articles });
      });
  }

  render() {
    return (
      <div>
        <h1>Articles</h1>
        <ArticleList articles={this.state.articles} />
      </div>
    );
  }
}

const ArticleList = props => (
  <div>
    <ol>
      {props.articles.map((article, index) => (
        <div key={index}>
          <li>{article.title}</li>
          <br />
        </div>
      ))}
    </ol>
  </div>
);

function App() {
  const appStyle = {
    fontFamily: "sans-serif",
    textAlign: "center"
  };

  return (
    <div className="App" style={appStyle}>
      <NewsApi />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>