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

احتاج المساعدة في حفظ مجموعة من الكائنات "الملاحظات" في الـ AsyncStorage

Ahmed Kawbal

السؤال

احتاج المساعدة في حفظ مجموعة من الكائنات "الملاحظات" في الـ AsyncStorage واستدعائها، وكذلك عرض هذه البيانات في الصفحة.

مثل.. عمليه كشف حساب  يظهر لك كامله العمليات التي قمت بها  

 وهكذا اريد ان يتم عرض جميع البيانات التي تم حفظها  وليس واحد فقط.

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

Recommended Posts

  • 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.

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

  • 0
بتاريخ 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.

قمت يذالك ولاكن عند الذهب الى الشاشه لاستعراض البيانات لا يظهر في الشاشه اي شي 

 

 

Screenshot 2022-11-14 173043.png

Screenshot 2022-11-14 173507.png

 

InsertInputMo.js

 طبعا الاكواد عمليه الادخال والحفظ في شاشه  .. 

   والاستيراد والعرض في شاشه اخرى   

تم التعديل في بواسطة ahmedkawbal
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...