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

السؤال

نشر

أريد جلب الداتا من async storage واجلبها بنجاح واستطيع ان اعرضها فى ال console ولكن المشكلة اننى عندما اريد وضعها فى FlatList يظهرلى هذا الايرور

TypeError: undefined is not an object (evaluating 'item.id.toString')
 

import React, {useState} from 'react';
import {View, Button, FlatList, Text} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const books = [
  {id: 1, name: 'الاسود يليق بك f'},
  {id: 2, name: 'هيبتا'},
  {id: 3, name: 'أرض زيكولا'},
];

export default function GetDataScreen() {
  const [Books, setBooks] = useState([]);
  console.log(Books.length);


  const storeData = async value => {
    try {
      const books = JSON.stringify(value);
      await AsyncStorage.setItem('books', books);
    } catch (e) {
      console.log(e);
    }
  };

  const getData = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem('books');

      setBooks(jsonValue);
      console.log(Books);
      return jsonValue != null ? JSON.parse(jsonValue) : null;
    } catch (e) {
      console.log(e);
    }
  };

  React.useEffect(() => {
    getData();
  }, []);

  return (
    <View>
      <Button title="Save" onPress={() => storeData(books)} />
      <Button title="get" onPress={() => getData()} />
      <FlatList
        data={Books}
        keyExtractor={item => item.id.toString()}
        renderItem={({item}) => <Text>{item.id}</Text>}
      />
      <Button title="test" onPress={() => console.log(Books)} />
    </View>
  );
}

هذا نتيجة ال Logs 
 

60ca3d9536681_.png.802cc925124ad58643b4d85b177d2fae.png

Recommended Posts

  • 0
نشر
بتاريخ 22 دقائق مضت قال أحمد ابراهيم عبد الله:

المشكلة انه فى Async storage لا يعيطينى الاراى كما خزنها انها يعطيها لى مقسمة وخالية من ال objects

أين تقوم بتخزين البيانات في storage

هل يمكنك إرفاق المشروع كملف مضغوط لأتمكن من تجريبه وإصلاح الأخطاء؟ شكرا لك

  • 0
نشر

حاول وضع شرط قبل عرض القائمة flat list تتأكد من وجود بيانات ضمن books قبل عرض القائمة لأنها ستعرض بياناتها.

حاول استخدام المعامل && أو ضعها في مكون منفصل و ضع الشرط المناسب قبل المرور على القائمة

  • 0
نشر
بتاريخ 1 ساعة قال Wael Aljamal:

حاول وضع شرط قبل عرض القائمة flat list تتأكد من وجود بيانات ضمن books قبل عرض القائمة لأنها ستعرض بياناتها.

حاول استخدام المعامل && أو ضعها في مكون منفصل و ضع الشرط المناسب قبل المرور على القائمة

فعلتها بدون فائدة

  • 0
نشر
بتاريخ 7 دقائق مضت قال Wael Aljamal:

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

import React, {useState} from 'react';
import {View, Button, FlatList, Text} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const books = [
  {id: 1, name: 'book one Updated'},
  {id: 2, name: 'book two'},
  {id: 3, name: 'book three'},
];
export default function GetDataScreen() {
  const [Books, setBooks] = useState([]);

  const getData = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem('books');
      setBooks(jsonValue);
      console.log(Books);
      return jsonValue != null ? jsonValue : null;
    } catch (e) {
      console.log(e);
    }
  };

  React.useEffect(() => {
    getData();
  }, []);

  return (
    <View>
      <Button title="get" onPress={() => getData()} />

      {Books.length > 0 && (
        <FlatList
          data={Books}
          keyExtractor={item => item.id.toString()}
          renderItem={({item}) => <Text>{item.name}</Text>}
        />
      )}

      <Button
        title="log"
        onPress={() => {
          console.log(books.length);
          console.log(Books.length);
        }}
      />
    </View>
  );
}

 

بتاريخ 8 دقائق مضت قال Wael Aljamal:

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

المشكلة انه فى Async storage لا يعيطينى الاراى كما خزنها انها يعطيها لى مقسمة وخالية من ال objects

بتاريخ 9 دقائق مضت قال Wael Aljamal:

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

هل هناك خطأ فى كود Async storage .. انا ريد ان اخزن أراى 

  • 0
نشر

إن الدالتين setItem + getItem تتعاملان مع سلاسل نصية وليس أغراض JSON عند التخزين أو جلب القيم. لذلك علينا تحويل المصفوصة لسلسلة نصية قبل حفظها، و إعادتها لغرض JSON بعد قرائتها:

الدوال المساعدة:

  1. JSON.stringify لتحويل غرض JSON لسلسلة نصية
  2. JSON.parse: لتحويل السلسلة النصية لغرض JSON
  • set
setObjectValue = async (value) => {
  try {
    const jsonValue = JSON.stringify(value)
    await AsyncStorage.setItem('key', jsonValue)
  } catch(e) {
    // save error
  }

  console.log('Done.')
}
  • get
getMyObject = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('@key')
    return jsonValue != null ? JSON.parse(jsonValue) : null
  } catch(e) {
    // read error
  }

  console.log('Done.')

}

تحتاج لعملية تعديل بسيطة في الشيفرة لديك كما في المثالين السابقين

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...