从 NewsApi (react, axios) 获取数据

Question

I've started to learn to react and now I'm working on a code challenge.

My task is to list data from the newsapi.org with Axios. There are 10 articles to be displayed and the list should be extendable (load more).

Now I can't get any further on the point of displaying the data.

Where is my mistake?

Here is my code:

import React from "react";
import axios from "axios";

class App extends React.Component {
  state = {
    articles: [],
    isLoading: true,
    errors: null
  };

  getArticles() {
    axios
      .get(
        "http://newsapi.org/v2/everything?q=ai&apiKey=XXXXXXXXX"
      )
      .then(response =>
        response.data.results.map(article => ({
          date: `${article.publishedAt}`,
          title: `${article.title}`,
          url: `${article.url}`
        }))
      )
      .then(articles => {
        this.setState({
          articles,
          isLoading: false
        });
      })
      .catch(error => this.setState({ error, isLoading: false }));
  }

  componentDidMount() {
    this.getArticles();
  }

  render() {
    const { isLoading, articles } = this.state;
    return (
      <React.Fragment>
        <h2>#AI</h2>
        <div>
          {!isLoading ? (
            articles.map(article => {
              const { date, title, url } = article;
              return (
                <div key={title}>
                  <p>{date}</p>
                  <p>{title}</p>
                  <p>{url}</p>
                </div>
              );
            })
          ) : (
            <p>Loading...</p>
          )}
        </div>
      </React.Fragment>
    );
  }
}
export default App;

Answer 1

You must use response.data. articles not results

Answer 2

As Kevin mentioned, first you need to map over response.data.articles , but you must also return the mapped results, otherwise when you call .then to set the state it'll be undefined . Like this:

getArticles() {
  axios
    .get(
      "https://newsapi.org/v2/everything?q=ai&apiKey=YOURAPIKEYGOESHERE"
    )
    .then(response => {
      return response.data.articles.map(article => ({
        date: `${article.publishedAt}`,
        title: `${article.title}`,
        url: `${article.url}`
      }));
    })
    .then(articles => {
      this.setState({
        articles,
        isLoading: false
      });
    })
    .catch(error => this.setState({ error, isLoading: false }));
}

That should work now.

Answer 3

Hi Try using the fetch() method see code below.

Part of code from Andrei's robofriends tutorial. Used the same conete

 <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> import React, {Component} from 'react'; import CardList from '../components/Cardlist'; import SearchBox from '../components/SearchBox'; import './App.css'; import Scroll from '../components/Scroll'; import ErrorBoundry from '../components/ErrorBoundry'; class App extends Component { //add state constructor() { super() this.state = { articles: [], searchfield: '' } } componentDidMount() { //fetch is a window object fetch('https://newsapi.org/v2/top-headlines?country=gb&category=business&apiKey=yourapikey') .then(response => response.json()) //convert to json //.then(users =>this.setState({ news: users})); .then(res => { const articles = res.articles; // Set state with result console.log(articles); this.setState({ articles: articles }); }) } //event for searchbox change //not part of react component so use arrow function onSearchChange = (event) => { this.setState({ searchfield: event.target.value}) } render() { const filteredNews = this.state.articles.filter(i => { return i.source.name.toLowerCase().includes(this.state.searchfield.toLowerCase()); //change name to source? }) console.log(filteredNews); if (this.state.articles.length === 0) { return <h1>Loading Robots</h1> } else { return ( <div className='tc'> <h1 className='f1'>Top Headlines</h1> <SearchBox searchChange={this.onSearchChange}/> <Scroll> <ErrorBoundry> <CardList articles={filteredNews}/> </ErrorBoundry> </Scroll> </div> ); } } } export default App;