اذهب إلى المحتوى
  • 0

LocalStorage في NextJS ، مشكلة useEffect

عبد النور محمد

السؤال

لدي مشكلة في الحصول على البيانات وتعيينها في localStorage  فأنا أستخدم NextJs لذا لا يمكنني استخدام localStorage في البداية.

أحاول حل المشكلة باستخدام useEffect لكن لدي حلقة لا نهائية  لا أعرف أفضل طريقة لحل المشكلة ، باستخدام useCallback أو useMemo أو useRef.

      const [ meetings, setMeetings] = useState([]) // meetings= [{meeting1},{meeting2}]
      
      useEffect(() => {

       if(localStorage.getItem('meetings') === undefined || 
         localStorage.getItem('meetings') === '' ||
         localStorage.getItem('meetings') === null
         ){
          localStorage.setItem('meetings', JSON.stringify([]))         
         }


       if( JSON.parse(localStorage.getItem('meetings')).length === 0){
            
             const meetingsInLocalStorage  = JSON.parse(localStorage.getItem('meetings'))
             setMeetings([...meetings, meetingsInLocalStorage])

       }
       },[meetings])

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

في حالتك يمكنك قراءة القيم من local storage خارج useEffect وهذا أفضل حل

const [ meetings, setMeetings] = useState([]) // meetings= [{meeting1},{meeting2}]

const meetingsData = localStorage.getItem('meetings');                 // نقلناها خارج useEffect 
const meetingsDataJSON = () => JSON.parse(localStorage.getItem('meetings')); // نقلناها خارج useEffect 

useEffect(() => {

  if(meetingsData === undefined || 
     meetingsData === ''        ||
     meetingsData === null
    ){
    localStorage.setItem('meetings', JSON.stringify([]))         
  }


  if( meetingsDataJSON().length === 0){

    const meetingsInLocalStorage  = JSON.parse(localStorage.getItem('meetings'))
    setMeetings([...meetings, meetingsInLocalStorage])

  }
},[meetings])

يمكن إضافة مستمع أحداث للتغيرات التي تطرأ على meeting في local storage وتقوم على تحديثها تلقائياً

useEffect(() => {
  function checkMeetingData() {
    const item = localStorage.getItem('meetingData')

    if (item) {
      setMeetingData(item)
    }
  }

  window.addEventListener('storage', checkMeetingData)

  return () => {
    window.removeEventListener('storage', checkMeetingData)
  }
}, [])

أو بهذه الطريقة:

useEffect(() => {
    window.addEventListener("storage", () => {
      // تحديث عند حدوث تغييرات في التخزين
      refetch();
    });

    return () => {
      // عند عمل unmounts نحذف مستمع الأحداث
      window.removeEventListener("storage");
    };
}, []);

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

سبب تلك الحلقة الﻻ نهائية أنك تقوم بإستخدام useEffect وتجعلها معتمدة على المتغير meetings وفي نفس الوقت تقوم بتغيير نفس المتغير في نفس دالة الuseEffect مما يعيد نداؤها مرة أخرى ويجعلها بالتالي تغير المتغير مرة أخرى إلى مالا نهاية, الحل أن تقوم بعمل دالتان للuseEffect

  1. الأولى تجعلها ﻻ تعتمد على متغيرات من الأساس, وتلك التي تقوم فيها بتغيير الmeetings
  2. الثانية المعتمدة على متغير الmeetings تقوم فيها بعمل باقي الشفرة البرمجية التي ﻻ تغير من هذا لمتغير
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...