مشكلة في تحديث حالة مكون في Next js

إذن المشكلة في تحديث الحالة state للمكون Header، في الجزء الخاص بعملية تسجيل الدخول يجب تحديث كائن المستخدم في contexts، ثم إعادة التوجيه للصفحة الرئيسية من خلال next/router.

وفي كائن Header يتم قراءة الحالة التي تم تحديثها.

في حال استمرت المشكلة أرفق مجلد المشروع لتفقده.

بتاريخ 11 دقائق مضت قال Mustafa Suleiman:

إذن المشكلة في تحديث الحالة state للمكون Header، في الجزء الخاص بعملية تسجيل الدخول يجب تحديث كائن المستخدم في contexts، ثم إعادة التوجيه للصفحة الرئيسية من خلال next/router.

وفي كائن Header يتم قراءة الحالة التي تم تحديثها.

في حال استمرت المشكلة أرفق مجلد المشروع لتفقده.

هذه هي الملفات و الباك اند هو نفسه المستخدم في الNode js الخاصه في اخر جزء من الدوره 

واذا كان هنالك اي مشاكل في باقي الكود اتمنى ان تخبروني وفي حال انكم ذكرتو اي شيء اذا ممكن ترفقولي المصدر للتوثيق لكي اعرف انا ضعيف في اي جانب وشكرا

test.zip

بتاريخ 2 ساعة قال رياض عثمان:

هذه هي الملفات و الباك اند هو نفسه المستخدم في الNode js الخاصه في اخر جزء من الدوره 

واذا كان هنالك اي مشاكل في باقي الكود اتمنى ان تخبروني وفي حال انكم ذكرتو اي شيء اذا ممكن ترفقولي المصدر للتوثيق لكي اعرف انا ضعيف في اي جانب وشكرا

test.zip 70.21 kB · 2 تنزيلات

المشكلة لديك في المكون Header وذلك لأن المكون Header لا يتم تحديثه تلقائيا بعد تسجيل الدخول وذلك لأن التغييرات في localStorage لا تؤدي إلى إعادة تصيير (render) تلقائية للمكونات في. ولحل هذه المشكلة من الممكن إستخدام الأحداث.

لقد لاحظت أنك في مكون login أطلقت حدث userUpdated . لهذا يجب علينا تعديل المكون Header ليستمع إلى هذا الحدث :

وإليك المكون Header بعد تعديله والإستماع إلى الحدث :

"use client"
import Image from "next/image";
import Link from "next/link"
import {useState,useEffect} from "react"

export default function Header() {
  const [user, setUser] = useState({});
  useEffect(() => {
    const handleUserUpdate = () => {
      setUser(JSON.parse(localStorage.getItem("user_data")));
    };
    setUser(JSON.parse(localStorage.getItem("user_data")));
  
    window.addEventListener("userUpdated", handleUserUpdate); // الاستماع للحدث
  
    return () => {
      window.removeEventListener("userUpdated", handleUserUpdate); // تنظيف الحدث
    };
  }, []);
  const handleLogout = ()=>{
    localStorage.removeItem("user_data");
    setUser({});
  }
  return (
   <>
    <div className="bg-white shadow-md sticky top-0 z-10">
      <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
        {/* Logo Section */}
        <div className="flex items-center space-x-3">
          <Link href="/">
            <Image src="/next.svg" width={100} height={100} alt="Logo" className="h-8 w-auto" />
          </Link>
        </div>

        {/* Navigation Links */}
        <div className="hidden md:flex space-x-8">
          <Link href="/" className="text-gray-700 hover:text-blue-600 transition duration-300">Home</Link>
          <Link href="/movies" className="text-gray-700 hover:text-blue-600 transition duration-300">Movies</Link>
          <Link href="/movies/create" className="text-gray-700 hover:text-blue-600 transition duration-300">Create Movie</Link>
          <Link href="/" className="text-gray-700 hover:text-blue-600 transition duration-300">About</Link>
        </div>

        {/* Login and Submit Buttons */}
        <div className="flex space-x-4">
        {user?.name ? (
           <div className="flex items-center justify-between gap-4">
            <Link
              href="/user"
              className="text-sm font-medium text-gray-700"
            >
            {user.name}
          </Link>
            <button 
              className="px-6 py-2 text-sm font-semibold text-white bg-red-600 rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition duration-300"
              onClick={handleLogout}
            >
              Logout
            </button>
          </div>
        ) : (
          <>
          <Link href="/login">
            <button className="px-6 py-2 text-sm font-semibold text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100 transition duration-300">
              Login
            </button>
          </Link>
          <Link href="/register">
            <button className="px-6 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition duration-300">
              Sign Up
            </button>
          </Link>
            </> 
              )}
        </div>
      </div>
    </div>

   </>
  );
}