Question

因此，我试图用从API获取的数据来设置变量。

当我的控制台将其记录到我的浏览器中时，一切正常，但是当我尝试在React上设置变量时，该变量最终变为undifeind。有人可以告诉我我在这里想念什么吗？

这是我的代码：

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

尝试一下：它输出您想要的。 **注意：提取是异步函数，意味着必须在生命周期方法内调用它，例如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()
使用状态和 this.setState()
提取数据后，这将导致自动重新渲染。
方便使用 asynchronous 函数调用：这些工具使轻松使用组件中的数据而又不知道何时可用，并有助于消除{{1 }}您遇到的问题。

undefined

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);

尝试从api获取数据时变得不确定-React

3 个答案: