После извлечения новостей с помощью ax ios и сохранения их в ответном крючке, как я могу использовать их дальше? - PullRequest
Новая
       6

После извлечения новостей с помощью ax ios и сохранения их в ответном крючке, как я могу использовать их дальше?

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

Я делаю сторонний проект для React, используя Ax ios для получения https://newsapi.org/ новостей, связанных с коронавирусом. Теперь я могу отображать новости на экране. Моя цель проста, не только отображать новости, но и при нажатии на изображение, он будет перенаправлять пользователя к этой определенной c новости. Я добавляю React-router в проект, но теперь не могу отобразить эту конкретную новость c. 

import React, {Component} from 'react';
import './App.css';
import News from './Component/News/News';
import {BrowserRouter} from 'react-router-dom';
import {Route, Switch} from 'react-router-dom';
import FullNews from './Component/FullNews/FullNews';


class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route path='/' exact component={News}/>
          <Route path='/:index' exact component={FullNews}/>
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;

Это приложение. js. 

import React from 'react';
import {useState, useEffect} from 'react';
import axios from 'axios';
import NewsList from '../NewsList/NewsList';


const News = (props) => {
    console.log(props)
    const [news, setNews] = useState([]);
    const [loading, setLoading] = useState(false)

    useEffect(() => {
        const fetchNews = async() => {
            setLoading(true)
            const res = await axios.get('http://newsapi.org/v2/top-headlines?country=us&category=health&apiKey=e9f5217c460c42f7826f02144e6c573c')
            setNews(res.data.articles);
            setLoading(false)
        }
        fetchNews();
    }, []) 

    console.log(news)

    const fetchNewsDetail = (index) => {
        props.history.push('/' + index)
    }
    if(loading) {
        return <div>The page is loading</div>
    }
    return (
        <React.Fragment>
            <header>
                <h1>Coronavirus News</h1>
            </header>
            <main>
                <NewsList news={news} fetchNewsDetail={fetchNewsDetail}/>
            </main>
        </React.Fragment>
    )
};

export default News;

Это главная страница, на которой отображается список новостей. 

import React from 'react';
import {withRouter, Link, Route} from 'react-router-dom';
import FullNews from '../FullNews/FullNews';

const NewsList = (props) => {

    console.log(props)
    return (
        <div>
            {props.news.map((item,index) => {
                    return (
                        <Link to={'/' + index} style={{textDecoration:'none',color: '#333333'}} key={index}>
                            <div>
                                <img
                                    src={item.urlToImage} 
                                    alt="newsImage" 
                                    onClick={() => props.fetchNewsDetail(item.index)}
                                    style = {{width:'90%', height: 'auto'}}
                                />
                                <h2>{item.title}</h2>
                                <h6>{item.publishedAt}</h6>
                            </div>
                        </Link>
                    )
            })}
            <Route path={props.match.url + '/:index'} exact component={FullNews}/>
        </div>
    )
}

export default withRouter(NewsList);

Это является компонентом списка новостей, который я хочу добавить в изображение каждой новости. Когда пользователь нажимает на изображение, оно будет отображать полные новости на новой странице. 

import React from 'react';
import {useState, useEffect} from 'react';
import axios from 'axios';

const FullNews = (props) => {
    console.log(props)
    const [loadedNews, setLoadedNews] = useState([]);
    const [loading, setLoading] = useState(false)

    useEffect(() => {
        const fetchFullNews = async() => {
            setLoading(true);
            const res = await axios.get('/' + props.match.params.index)
            setLoadedNews(res.data)
            setLoading(false)
        }
        fetchFullNews()
    },[])


    return (
        <div>
            <h2>This is News {props.match.params.index}</h2>
        </div>
    )
}


export default FullNews;

Это полная страница новостей, с которой я борюсь, я не могу использовать топор ios .get для получения этой новости. axios.get('/' + props.match.params.index) Это не работает и всегда показывает xhr. js: 178 GET http://localhost: 3000/1 404 (не найдено)

После загрузки Newsapi я уже получил сборник статей, которые можно использовать для меня. Но сейчас я понятия не имею, как передать их на полную новость.

...