- Milyen videókártyát?
- Épített vízhűtés (nem kompakt) topic
- Bambu Lab 3D nyomtatók
- Házimozi belépő szinten
- Plazma TV topic
- A Windows 11 lett az úr az asztali PC-k piacán
- TCL LCD és LED TV-k
- NVIDIA GeForce RTX 4080 /4080S / 4090 (AD103 / 102)
- Házi barkács, gányolás, tákolás, megdöbbentő gépek!
- Kezdő fotósok digitális fényképei
-
PROHARDVER!
JavaScript != Java (A JavaScript nem összekeverendő a Javával, két különböző programozási nyelvről van szó!)
Ú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!
Új hozzászólás Aktív témák
- Milyen videókártyát?
- Vékonyabb lett, jobb kamerát kapott, de az akku maradt a régi: itt a Fold7
- Épített vízhűtés (nem kompakt) topic
- Windows 10
- Változó design, tekerhető lünetta: megjött a Galaxy Watch8 és a Classic
- Windows 11
- Digitális Állampolgárság Program DÁP
- Kínai és egyéb olcsó órák topikja
- Bambu Lab 3D nyomtatók
- Honor Magic V3 - mágikus realizmus
- További aktív témák...
- Samsung Galaxy S23 , 8/128 GB , Kártyafüggetlen
- Csere-Beszámítás! RTX Számítógép játékra! R5 5600X / RTX 3080 / 32GB DDR4 / 1TB SSD
- Lejárt a gyártói garancia? Mi tovább támogatjuk az IT infrádat!
- ÚJ HP EliteBook 840 G8 - 14"FHD IPS - i5-1145G7 - 32GB - 512GB SSD - Win10 - 6 hónap Garancia
- Honor Magic7 Lite 8/512GB, Kártyafüggetlen
Állásajánlatok
Cég: CAMERA-PRO Hungary Kft
Város: Budapest
Cég: Promenade Publishing House Kft.
Város: Budapest