ظهر لي هذا الخطا عند الحفظ البيانات في localStorage

المشكلة حسب الصورة التي أرفقتها تكمن في أن المتغير `notes` ليس مصفوفة بشكل صحيح، وبالتالي لا يمكن استخدام الميثود `map` عليه.

للتحقق من ذلك، يمكنك إضافة بعض التحققات في الكود للتأكد من أن `notes` هو مصفوفة قبل استخدام `map` عليها، يمكنك فعل ذلك عن طريق إضافة شرط قبل استخدام `map` كما يلي:

<NoteList>
  {Array.isArray(notes) && notes.map((note) => (
    <NoteItems
      key={note.id}
      title={note.title}
      noteClicked={() => selectedNoteHandler(note.id)}
      active={selectedNote === note.id}
    />
  ))}
</NoteList>

وهكذا سيتأكد أن `notes` فعلا مصفوفة قبل استخدام `map`، وإلا فسيتم تجاهل استخدام `map`، وهذا سيمنع ظهور الخطأ `map is not a function` في حال كان `notes` ليس مصفوفة.

أرجو رفع ملفات المشروع كاملة، كي أساعدك على حل المشكلة بشكل صحيح. 

المشكلة لديك هي أنّ المصفوفة notes ليست مصفوفة وبالتالي ميثود map لا يمكن التعرف عليها لأنها خاصة بالمصفوفات، وذلك ما يظهر لك map is not a function.

لذا تأكد من تمرير notes بشكل صحيح وأنها مصفوفة يمكنك طباعتها بالكونسول للتأكد.

  بتاريخ On 7‏/3‏/2024 at 21:07 قال ياسر مسكين:

المشكلة حسب الصورة التي أرفقتها تكمن في أن المتغير `notes` ليس مصفوفة بشكل صحيح، وبالتالي لا يمكن استخدام الميثود `map` عليه.

للتحقق من ذلك، يمكنك إضافة بعض التحققات في الكود للتأكد من أن `notes` هو مصفوفة قبل استخدام `map` عليها، يمكنك فعل ذلك عن طريق إضافة شرط قبل استخدام `map` كما يلي:

<NoteList>
  {Array.isArray(notes) && notes.map((note) => (
    <NoteItems
      key={note.id}
      title={note.title}
      noteClicked={() => selectedNoteHandler(note.id)}
      active={selectedNote === note.id}
    />
  ))}
</NoteList>

وهكذا سيتأكد أن `notes` فعلا مصفوفة قبل استخدام `map`، وإلا فسيتم تجاهل استخدام `map`، وهذا سيمنع ظهور الخطأ `map is not a function` في حال كان `notes` ليس مصفوفة.

أرجو رفع ملفات المشروع كاملة، كي أساعدك على حل المشكلة بشكل صحيح. 

أظهر المزيد  

App.cssFetching info... App.jsFetching info... App.test.jsFetching info... index.jsFetching info... NoteContainer.jsFetching info... NoteForm.jsFetching info... NoteItems.jsFetching info... NoteList.jsFetching info... index.jsFetching info... index.cssFetching info... index.jsFetching info... logo.svgFetching info... reportWebVitals.jsFetching info... setupTests.jsFetching info...

  بتاريخ On 7‏/3‏/2024 at 21:08 قال Mustafa Suleiman:

المشكلة لديك هي أنّ المصفوفة notes ليست مصفوفة وبالتالي ميثود map لا يمكن التعرف عليها لأنها خاصة بالمصفوفات، وذلك ما يظهر لك map is not a function.

لذا تأكد من تمرير notes بشكل صحيح وأنها مصفوفة يمكنك طباعتها بالكونسول للتأكد.

أظهر المزيد  

لا يوجد مشكله في notes
هذا هو الكود
 

  useEffect(() => {

    if (localStorage.getItem("notes")) {

      setNotes(JSON.parse(localStorage.getItem("notes")));

    } else {

      localStorage.setItem("notes", JSON.stringify([]));

    }

  }, []);

  const saveNotesToLocalStorage = (key, value) => {

    localStorage.setItem(key, JSON.stringify(value));

  };

لما كتبت هذا الكود حدث الخطا
setNotes(JSON.parse(localStorage.getItem("notes")));
لما اجي اشيل setNotes الخطا بيتشال

  بتاريخ On 7‏/3‏/2024 at 21:07 قال ياسر مسكين:

المشكلة حسب الصورة التي أرفقتها تكمن في أن المتغير `notes` ليس مصفوفة بشكل صحيح، وبالتالي لا يمكن استخدام الميثود `map` عليه.

للتحقق من ذلك، يمكنك إضافة بعض التحققات في الكود للتأكد من أن `notes` هو مصفوفة قبل استخدام `map` عليها، يمكنك فعل ذلك عن طريق إضافة شرط قبل استخدام `map` كما يلي:

<NoteList>
  {Array.isArray(notes) && notes.map((note) => (
    <NoteItems
      key={note.id}
      title={note.title}
      noteClicked={() => selectedNoteHandler(note.id)}
      active={selectedNote === note.id}
    />
  ))}
</NoteList>

وهكذا سيتأكد أن `notes` فعلا مصفوفة قبل استخدام `map`، وإلا فسيتم تجاهل استخدام `map`، وهذا سيمنع ظهور الخطأ `map is not a function` في حال كان `notes` ليس مصفوفة.

أرجو رفع ملفات المشروع كاملة، كي أساعدك على حل المشكلة بشكل صحيح. 

أظهر المزيد  

لم يتم الرد علي ؟؟

  بتاريخ On 9‏/3‏/2024 at 22:05 قال Omar Hassan10:

لم يتم الرد علي ؟؟

أظهر المزيد  

أرجو طرح سؤالك أسفل فيديو الدورة لمساعدتك بشكل أفضل، وطرح الأسئلة العامة هنا، ستجد صندوق تعليقات في نهاية صفحة الدرس.

وعند رفع المشروع، نقوم بضغط مجلد المشروع من الخارج بواسطة winRAR ثم نرفع المجلد المضغوط وليس الملفات بشكل منفرد.