Ahmed Kawbal نشر 13 نوفمبر 2022 أرسل تقرير مشاركة نشر 13 نوفمبر 2022 احتاج المساعدة في حفظ مجموعة من الكائنات "الملاحظات" في الـ AsyncStorage واستدعائها، وكذلك عرض هذه البيانات في الصفحة. مثل.. عمليه كشف حساب يظهر لك كامله العمليات التي قمت بها وهكذا اريد ان يتم عرض جميع البيانات التي تم حفظها وليس واحد فقط. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 عمر قره محمد نشر 14 نوفمبر 2022 أرسل تقرير مشاركة نشر 14 نوفمبر 2022 في هذه الإجابة أفترض أنك تستخدم الـ functional component. في البداية يجب ان تعرّف state باسم notes كالتالي : const [notes, setNotes] = useState([]); وبعد ذلك قوم بإحضار البيانات من الـ AsyncStorage في الـ useEffect ونضيف الـ [] الفارغة كباراميتر لها حتى تستدعى مرة واحدة عند فتح الصفحة. كالتالي : const [notes, setNotes] = useState([]); useEffect(() => { const value = await AsyncStorage.getItem("notes"); const parsed = JSON.parse(value) setNotes(parsed); }, []); وتقوم بتعديل الكود الخاص بحفظ الـ notes في الـ asyncStorage ليصبح بالشكل : const saveNoteHandler = async()=> { . . . try{ const da = [...notes , body]; await AsyncStorage.setItem("notes" , d); setNotes(da); . . . } catch(e){ console.log(e) } . . . } ولقد اعتمدت على الكود الذي استخدمته أنت في سؤالك السابق : حيث ان الكود التالي : const da = [...notes , body]; يعني ان تقوم بتوزيع الـ array المسمى notes داخل الـ array المسمى da ثم تضيف الـ الكائن body لها ليصبح لديك array يحتوي كل البيانات السابقة بالإضافة للمكون الجديد. والـ setNotes(da); حتى نقوم بحفظ البيانات في الـ state بعد حفظها في الـ AsyncStorage. ليصبح الكود بالكامل : const [notes, setNotes] = useState([]); useEffect(() => { const value = await AsyncStorage.getItem("notes"); const parsed = JSON.parse(value) setNotes(parsed); }, []); const saveNoteHandler = async()=> { . . . try{ const da = [...notes , body]; await AsyncStorage.setItem("notes" , d); setNotes(da); . . . } catch(e){ console.log(e) } . . . } وحتى نعرض هذه البيانات المحفوظة في الـ state نكتب : {notes?.map((note , index) =>{ return ( <View key={index}> <Text>{note.name}</Text> <Text>{note.email}</Text> <Text>{note.pass}</Text> </View> ) })} حيث نقوم بعمل map على الـ state المسماة notes ولكل note نقوم بإعادة view تحتوي التفاصيل. والـ key مهمة حتى يستطيع react متابعة الكائن الذي انشأته. واشارة الاستفهام في notes?.map من اجل التأكد من أن notes موجودة، فإذا لم تكن موجودة لا يقوم بعمل map. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Ahmed Kawbal نشر 14 نوفمبر 2022 الكاتب أرسل تقرير مشاركة نشر 14 نوفمبر 2022 (معدل) بتاريخ 1 ساعة قال عمر قره محمد: في هذه الإجابة أفترض أنك تستخدم الـ functional component. في البداية يجب ان تعرّف state باسم notes كالتالي : const [notes, setNotes] = useState([]); وبعد ذلك قوم بإحضار البيانات من الـ AsyncStorage في الـ useEffect ونضيف الـ [] الفارغة كباراميتر لها حتى تستدعى مرة واحدة عند فتح الصفحة. كالتالي : const [notes, setNotes] = useState([]); useEffect(() => { const value = await AsyncStorage.getItem("notes"); const parsed = JSON.parse(value) setNotes(parsed); }, []); وتقوم بتعديل الكود الخاص بحفظ الـ notes في الـ asyncStorage ليصبح بالشكل : const saveNoteHandler = async()=> { . . . try{ const da = [...notes , body]; await AsyncStorage.setItem("notes" , d); setNotes(da); . . . } catch(e){ console.log(e) } . . . } ولقد اعتمدت على الكود الذي استخدمته أنت في سؤالك السابق : حيث ان الكود التالي : const da = [...notes , body]; يعني ان تقوم بتوزيع الـ array المسمى notes داخل الـ array المسمى da ثم تضيف الـ الكائن body لها ليصبح لديك array يحتوي كل البيانات السابقة بالإضافة للمكون الجديد. والـ setNotes(da); حتى نقوم بحفظ البيانات في الـ state بعد حفظها في الـ AsyncStorage. ليصبح الكود بالكامل : const [notes, setNotes] = useState([]); useEffect(() => { const value = await AsyncStorage.getItem("notes"); const parsed = JSON.parse(value) setNotes(parsed); }, []); const saveNoteHandler = async()=> { . . . try{ const da = [...notes , body]; await AsyncStorage.setItem("notes" , d); setNotes(da); . . . } catch(e){ console.log(e) } . . . } وحتى نعرض هذه البيانات المحفوظة في الـ state نكتب : {notes?.map((note , index) =>{ return ( <View key={index}> <Text>{note.name}</Text> <Text>{note.email}</Text> <Text>{note.pass}</Text> </View> ) })} حيث نقوم بعمل map على الـ state المسماة notes ولكل note نقوم بإعادة view تحتوي التفاصيل. والـ key مهمة حتى يستطيع react متابعة الكائن الذي انشأته. واشارة الاستفهام في notes?.map من اجل التأكد من أن notes موجودة، فإذا لم تكن موجودة لا يقوم بعمل map. قمت يذالك ولاكن عند الذهب الى الشاشه لاستعراض البيانات لا يظهر في الشاشه اي شي InsertInputMo.js طبعا الاكواد عمليه الادخال والحفظ في شاشه .. والاستيراد والعرض في شاشه اخرى تم التعديل في 14 نوفمبر 2022 بواسطة ahmedkawbal اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Ahmed Kawbal
احتاج المساعدة في حفظ مجموعة من الكائنات "الملاحظات" في الـ AsyncStorage واستدعائها، وكذلك عرض هذه البيانات في الصفحة.
مثل.. عمليه كشف حساب يظهر لك كامله العمليات التي قمت بها
وهكذا اريد ان يتم عرض جميع البيانات التي تم حفظها وليس واحد فقط.
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.