React Usecontext Status Aktualisiert nicht auslösende Verwendungseffekt [Duplikat] ⇐ JavaScript

[Anonymous]

Ich versuche, den React Usecontext Hook zu implementieren, um den Status einer Benutzerlizenz zu teilen. Ich habe dieses Muster online gefunden, kann es aber nicht zum Laufen bringen. Wenn die Lizenz nicht gültig ist, wird der Benutzer mit Anweisungen zu einer Warnseite umgeleitet. < /p>
import { createContext, useContext, useState, useEffect } from "react";

interface Props {
children: React.ReactNode;
}

export interface LicenseContextModel {
product: boolean | null;
api: string | null;
isLoading: boolean;
}

export const LicenseContext = createContext({} as LicenseContextModel);

const LicenseContextProvider = ({ children }: Props): JSX.Element => {
const [product, setProduct] = useState(false);
const [api, setApi] = useState('');
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
const checkLicense = async () => {
try {
console.log('LicenseContextProvider is running');

setProduct(true);
setApi('blah');

} catch (error) {
console.error('License check failed:', error);
}
setIsLoading(false);
};

checkLicense();
},[]);

const licenseContext: LicenseContextModel = {
product,
api,
isLoading,
};

console.log('licenseContext', licenseContext);

return {children};
};

export function useLicense(): LicenseContextModel {
const context = useContext(LicenseContext);

console.log('context', context);

if (!context) {
throw new Error('useLicense must be used within a LicenseContextProvider');
}

return context;
}

export default LicenseContextProvider;
< /code>
landingPage.tsx
import React, { useEffect } from "react";

import LicenseContextProvider, { useLicense } from '@/contexts/license-context';
import { useRouter } from 'next/navigation';

const LandingPage = () => {
const { product, api, isLoading } = useLicense();
const router = useRouter();

useEffect(() => {
console.log('page isLoading', isLoading);

if (!isLoading) {
console.log('product', product);
console.log('api', api);

if (!product) {
router.push('/license-warning');
} else if (api === '') {
router.push('/key-manager');
}
}
},[product, api, isLoading]);

return (

Landing Page



Landed on the page




);
};

export default LandingPage;
< /code>
Landing Page Imports licenseContextProvider und uselicense aus Lizenzkontext. Der anfängliche Kontext. Legt die Produkt- und API -Werte auf True bzw. 'bla "fest und legt die IS -Pause auf False fest. Die Nutzungseffekte in der Landeberichtung wird jedoch niemals durch eine der Änderungen ausgelöst und der Anruf wird immer auf die Lizenz-Warn-Seite weitergeleitet. . Ich versuche herauszufinden, wie ich den Zustand zwischen ihnen teilen kann.context Object { } license-context.tsx:57:13
licenseContext license-context.tsx:42:12
Object { product: false, api: "", isLoading: true }
LicenseContextProvider is running license-context.tsx:25:33
page isLoading undefined LandingPage.tsx:22:21
product undefined LandingPage.tsx:24:25
api undefined LandingPage.tsx:25:25
licenseContext license-context.tsx:42:12
Object { product: true, api: "blah", isLoading: false }
< /code>
Ich würde erwarten, dass ein anderes Update von 'Seite isloading' nach dem LICENSECONTEXT -UseSeffect -Abschluss angezeigt wird, aber die Verwendungseffekte in der Landebereiche wird nicht ausgelöst. geschätzt. Ich habe das Gefühl, dass mir ein grundlegender Zusammenhang zwischen dem Lizenzontext (der immer nicht definiert ist) und dem lizenzigerContextProvider (der das Produkt, die API und die Isloading -Zustände aktualisiert).