0

Я новичок в использовании 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></>
  }
2
  • Когда пользователь нажимает в компоненте на ссылку, что должно происходить? В компонент StoryPage должно передаваться что? В нем просто кроме кнопки для возврата ничего нет и смущает getStoryIds()... т.е. не очень понятно поведение, которое ожидаете
    – SwaD
    24 окт 2022 в 17:51
  • @SwaD В StoryPage должно передаться название новости, ссылка на новость, дата и автор.
    – Kohl
    24 окт 2022 в 18:03

1 ответ 1

0

Мне полноценно проверить решение негде, но вот пример того, как это сделать через react-router-dom

В компоненте Story передаем в state всю сторю(story), которую вы получили от вашего API.

<StoryTitle>
    <Link to="/storyPage" state={story}>
        <a href={story.url}>
            {story.title}
        </a>
    </Link>
 </StoryTitle>

В компоненте StoryPage добавяем хук useLocation и в момент установки компонента в DOM записываем в состояние значение state. Далее останется написать сам рендер.

export const StoryPage=()=>{
    const location = useLocation();
    const [storyIds, setStoryIds]=React.useState([]);
      React.useEffect(()=>{
          //getStoryIds().then(data=>setStoryIds(data));
          setStoryIds(location.state);
      },[]);
      
      React.useEffect(()=>{
          console.log(storyIds);
      }, [storyIds])
      
      return  <>
      <Link to="/">
          <button>Container</button>
      </Link>
    <Story></Story></>
  }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.