Keresés

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

  • 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! :R

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