Получить данные из NewsApi (реагировать, топор ios) - PullRequest
Новая
       32

Получить данные из NewsApi (реагировать, топор ios)

1 голос
/ 06 марта 2020

Я начал учиться реагировать, и сейчас я работаю над проблемой кода.

Моя задача - составить список данных с newsapi.org с помощью Ax ios. Необходимо отобразить 10 статей, и список должен быть расширяемым (загрузить больше).

Теперь я не могу получить дальнейшие сведения о отображении данных.

Где моя ошибка ?

Вот мой код: 

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;

Ответы [ 3 ]

1 голос
/ 06 марта 2020

Вы должны использовать response.data. статьи не результаты

0 голосов
/ 16 апреля 2020

Привет Попробуйте использовать метод fetch (), см. Код ниже.

Часть кода из учебника Андрея по робототехнике. Используется тот же конет 

<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;
0 голосов
/ 06 марта 2020

Как уже упоминал Кевин, сначала вам нужно отобразить на response.data.articles, но вы также должны вернуть отображенные результаты, в противном случае, когда вы вызовете .then, чтобы установить состояние, оно будет undefined. Вот так: 

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

Это должно работать сейчас.

...