Új hozzászólás Aktív témák

• Ukeve tag

  #9159 2022-03-23 18:24:38

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Ukeve

  tag

  Sziasztok!
  Egy kis segítséget szeretnék kérni.
  Egy React alapú webalkalmazást fejlesztek, ahol adott ez a komponens:const MainLesson = () => {
const navigate = useNavigate();
const [ openID, setOpenID ] = useState();
const initialState = '0';
const [ childOpenID, setChildOpenID ] = useState(initialState);

useEffect(() => {
    console.log('Beállítjuk a localstorage-nek az id-t');
    localStorage.setItem('id', JSON.parse(childOpenID));
    console.log('Beállítottuk a localstorage-nek az id-t');
});

return (
    <div>
       {LessonsData.map((lessonItem) =>
           <div key={lessonItem.id} onClick={() => setOpenID(lessonItem.id)}>
               {lessonItem.id !== openID
                   ? <LessonCard taskItem={lessonItem} />
                   : lessonItem.id === openID && lessonItem.subsection > 0 ?
                       lessonItem.child.map((lessonChildItem) =>
                           <div key={lessonChildItem.id}
                                onClick={() => {
                                   setChildOpenID(lessonChildItem.id);
                                }}
                           >
                             <LessonCard taskItem={lessonChildItem} />
                             {childOpenID !== '0' &&
                               navigate(`/lesson/${childOpenID}`)}
                           </div>)
                       : <LessonCard taskItem={lessonItem} />}
                   </div>)}
               </div>
      );
};
  A komponens lényege röviden az, hogy ha egy adott LessonCard-ra rákattintok, akkor a localstorage-ben eltárolja annak az id-ját és ha az egy gyerekelem, akkor át is navigál a megfelelő oldalra.
  Az App-ben pedig dinamikusan kezelem azt, hogy az id-nak megfelelő oldal nyíljon meg:
  function App() {
const authenticationContext = useContext(AuthenticationContext);
const getLessonID = () => {
    console.log('Átadjuk az app-ben az id-t');
    const id = JSON.parse(localStorage.getItem('id'));
    console.log('id az app-ban:', id);
    return id;
};

const lessonID = getLessonID();
console.log('lessonID:', lessonID);

return (
    <Layout>
       <Routes>
           <Route path='/' element={<HomePage />} />
           {!authenticationContext.isLoggedIn &&
               <Route path='/authentication'
                      element={<AuthenticationPage />}
               />}
           <Route path='/authors' element={<AuthorsPage />} />
           <Route path='/contact' element={<ContactPage />} />
           <Route path='/topics' element={<TopicsPage />} />
           {authenticationContext.isLoggedIn &&
               <Route path='/lessons' element={<LessonsPage />} />}
           {authenticationContext.isLoggedIn &&
               <Route path='/profile' element={<UserProfile />} />}
           {authenticationContext.isLoggedIn &&
               <Route path='/lesson/:id'
                   element={lessons.content.body.map(
                       block => block.id === lessonID &&
                           Components(block))}/>}
           <Route path='*' element={<NotFound />} />
       </Routes>
    </Layout>
    );
}
  A probléma az, hogy ha rákattintok egy adott leckére, akkor szépen átnavigál a megfelelő oldalra és be is teszi a localstorage-be az id-t, viszont mivel az App nem renderelődik le újra, így a képernyőn mindig az előző lecke oldala nyílik meg. Ezt úgy kell érteni, hogy rákattintok először a 21-es id-jú leckére, majd visszamegyek és meg akarom nyitni a 22-es id-jú leckét, akkor az url jó lesz, tehát "localhost:3000/lesson/22" lesz, de a 21-es oldalát látom. Ha ráfrissítek az oldalra, akkor marad a jó url, viszont már a 22-es leckét fogom látni.
  Az lenne a kérdésem, hogy szerintetek hogyan lehetne megoldani azt, hogy azelőtt kapja meg az App localstorage-ból az id-t, mielőtt még elkezdené lerendelni az adott komponens, így elérve, hogy jó oldal legyen megjelenítve?

  Előre is köszönöm a segítséget!

Új hozzászólás Aktív témák