Я новичок в использовании API .У меня есть сервер API новостей на базе которого я сделала сайт. Новости выводятся на главной странице(название, автор и время). При клике на новость открывается страница самой новости(StoryPage.jsx), на которой должны отображаться название новости, автор и ссылка на нее. Я не понимаю как эти данные достать. Сервер разобрала в hnApi.js, Далее оттуда информация идет в StoryContainer.js, который в свою очередь передает данные в компонент Story.js. Я не знаю как быть с компонентом StoryPage.jsx, чтобы он выводил мне данные новости. Помогите пожалуйста!
import React,{useState,useEffect} from "react";
import { getStory } from "../services/hnApi";
import { StoryWrapper, StoryTitle, StoryMeta, StoryMetaElement } from "../styles/StoryStyles";
import { mapTime } from "../mappers/mapTime";
import { Link } from "react-router-dom";
import { StoryPage } from "./StoryPage";
import { Route } from "react-router-dom";
import AppContext from "./context";
export const Story=({storyId})=>{
const [story, setStory]=useState({});
useEffect(()=>{
getStory(storyId).then(data=>data&&data.url&&setStory(data));
},[]);
return story&&story.url?(
<StoryWrapper data-testid="story">
<StoryTitle>
<Link to="/storyPage"><a href={story.url}>
{story.title}</a></Link>
</StoryTitle>
<StoryMeta>
<span data-testid="story-by">
<StoryMetaElement color="#000">By:</StoryMetaElement>{story.by}
</span>
<span data-testid="story-time">
<StoryMetaElement color="#000">Posted:</StoryMetaElement>{` `}
{mapTime(story.time)}
</span>
</StoryMeta>
</StoryWrapper>
):null;
}
import React,{useEffect,useState} from "react";
import { getStoryIds } from "../services/hnApi";
import { Story } from "../components/Story";
import { GlobalStyle, StoriesContainerWrapper } from "../styles/StoriesContainerStyles";
import { Link } from "react-router-dom";
export const StoriesContainer=()=>{
const refreshPage=()=>{
window.location.reload();
}
const [storyIds, setStoryIds]=useState([]);
useEffect(()=>{
getStoryIds().then(data=>setStoryIds(data));
},[]);
return (
<>
<GlobalStyle/>
<StoriesContainerWrapper data-test-id="stories-container">
<h1>Hacker News</h1>
<button type="button" onClick={refreshPage}>Refresh</button>
{storyIds.map(storyId=>(
<Story key={storyId} storyId={storyId}/>
))};
</StoriesContainerWrapper>
</>
)
}
import axios from 'axios';
import { selectFields } from '../selectors/SelectFields';
export const baseUrl='https://hacker-news.firebaseio.com/v0/';
export const newStoriesUrl=`${baseUrl}newstories.json`;
export const storyUrl=`${baseUrl}item/`;
export const getStory = async (storyId) => {
const result=await axios
.get(`${storyUrl+storyId}.json`)
.then(({data})=>data && selectFields(data));
return result;
};
export const getStoryIds = async () => {
const result=await axios.get(newStoriesUrl).then(({data})=>data);
return result;
};```
``` //StoryPage.jsx
import {Link} from "react-router-dom";
import React from "react";
import { Story } from "./Story";
import { StoryWrapper, StoryTitle, StoryMeta, StoryMetaElement } from "../styles/StoryStyles";
import { mapTime } from "../mappers/mapTime";
import { getStoryIds } from "../services/hnApi";
export const StoryPage=()=>{
const [storyIds, setStoryIds]=React.useState([]);
React.useEffect(()=>{
getStoryIds().then(data=>setStoryIds(data));
},[]);
return <>
<Link to="/">
<button>Container</button>
</Link>
<Story></Story></>
}