Блог

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

Цель состоит в том, чтобы на главной странице отображалась вся запись в блоге в списке и подробная информация о любой записи в блоге рядом с ней при первой загрузке домашней страницы. Когда пользователь нажимает на любой элемент из списка, сведения о котором заменят сведения о блоге по умолчанию. В основном, как действительно отображаются должности о работе.

Метод: Я делаю 2 вызова Axios, один для получения всех данных, а другой для получения данных по идентификатору. Данные из getAllData отображаются в списке на главной странице. Данные передаются в качестве реквизитов в элементы домашней страницы, которые заключены в <Ссылка на= { /${idx} }/>

Я использую параметры использования, чтобы получить идентификатор и сделать вызов getDataId в DataById.

Таким образом, домашняя страница должна содержать дочерние компоненты, элементы домашней страницы, а проблема с идентификатором базы данных заключается в:

1. Функция getDataById in не работает при первой загрузке домашней страницы. Это работает только тогда, когда маршрут «localhost/:id», который является «localhost:3000/ae86140b-7ae6-457-826c-5bd324b8cb3»
2. Потому что я хочу, чтобы один блог уже отображался при первой загрузке: Как мне запустить эту функцию getDatabyId с заданным идентификатором, где идентификатор меняется, когда пользователь нажимает на элемент списка?

Код такой:

 import React, { useState, useEffect, usePrevious } from "react";
import { Link, useParams } from "react-router-dom";
import Axios from "axios";
import HomePageListItems from "./homePageListItems";
import DataById from "./dataById";

export default function HomePage(props){
  <DataById/>
    const [getAllData, setGetAllData] = useState()
    const getData =async () => {
      await  Axios.get("http://localhost:5000/get").then((response)=>{
        setGetAllData(response.data)
        })
        .catch((error)=>{console.log(error)})
    }
    useEffect(()=>{
        getData();
      },[])
    return(
        <section>
          <Link to = "/postJournal">Post Journal Entry</Link>
            {getAllDataamp;amp;getAllData.map((item)=>{
                return(
                    <HomePageListItems
                    key={item.id}
                    idx={item.id}
                    name={item.name}
                    title={item.title}
                    journalEntry={item.journalEntry}
                    date={item.date}
                    file={item.file}
                    />
                )
            })
            
        }
         {usePrevious}
        <DataById/>
        </section>
        
    )
}
 

—

     import React, { useState, useEffect, usePrevious } from "react";
    import { useParams } from "react-router-dom";
    import Axios from "axios";
    
    export default function DataById(props){
      console.log("DataProps",props)
      const [axiosGetData, setAxiosGetData] = useState([])
      const {id} = useParams()
      const getDataById =async () => {
            await  Axios.get(`http://localhost:5000/${id}`).then((response)=>{
              setAxiosGetData(response.data[0])
                  console.log("Data",response.data[0])
              })
              .catch((error)=>{console.log(error)})
          }
          useEffect(()=>{
            getDataById("35b48be0-0ab8-4409-a5eb-a0c4dbd0a4b3");
          },[id])
    
        return(
          <>
          <p> DataByID</p>
            name:{axiosGetData.name}
            Date:{axiosGetData.date}
            Journal:{axiosGetData.journalEntry}
            {usePrevious}
          </>
        
        )
    
    }  

--

    import React, { useState, useEffect, usePrevious} from "react";
    import { Link} from "react-router-dom";
    
    export default function HomePageListItems(props){
        let {name,title,journalEntry,date,file,idx}=props
        return(
            <main className= "homepage">
               <Link to={`/${idx}`} >
                <section className="homepage__listContainer">
                    <ul className = "homepage__list">
                        <li className="homepage__listItemWrapper">
                            <div className ="homepage__listItem">
                                <div className = "homepage__listItemImgWrapper">
                                    <img className = "homepage__listItemImg" alt="" src={file}/>
                                </div>
                                <h3 className= "homepage__listItemTitle">Title:{title}</h3>
                                <p className = "homepage__listItemAuthor">Name:{name}</p>
                                <p className = "homepage__listItemDescription">Description:{journalEntry}</p>
                                <p className = "homepage__listItemDate">Posted Date:{date}</p>
                                <p>Key:{idx}</p>
                            </div>
                        </li>
                    </ul>
                </section>
                 </Link>
                {usePrevious}  
            </main>
          
        )
    }

--
import React from "react";
import "./style/App.css";
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch, Router, Route } from "react-router-dom";
import HomePage from "./components/homePage"
import PostJournalEntry from "./components/postJournalEntry"
import DataByIDfrom "./components/dataById"


function App() {
  return (
    <div className="app">
      <BrowserRouter>
      <Switch>
      <Route path="/:id" exact component = {HomePage}/>
      <Route path="/:id" exact component = {DataByID}/>
      <Route path="/postJournal" exact component = {PostJournalEntry}></Route>
      <Route path="/" exact component = {HomePage}/>
      </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;
 

Заранее спасибо, ребята! Любая помощь приветствуется.

Это связано с тем, что getDataById не принимает никаких аргументов, он всегда использует идентификатор URL (useParams) для вызова axios get, передача ему идентификатора в useEffect ничего не даст. Вам нужно добавить параметр в функцию, а затем добавить некоторую логику, чтобы она знала, следует ли использовать переданное значение или значение идентификатора URL. Вы могли бы попробовать что-то вроде этого:

       const getDataById = async (startupId = null) => {
            await  Axios.get(`http://localhost:5000/${startupId ? startupId : id}`).then((response)=>{
              setAxiosGetData(response.data[0])
                  console.log("Data",response.data[0])
              })
              .catch((error)=>{console.log(error)})
          }
 

Таким образом, если вы передадите аргумент getDataById, он будет использовать это значение для вызова axios, в противном случае он попытается использовать значение идентификатора из useParams